打赏

vue 钩子函数 使用async await

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>vue 钩子函数 使用async await</title>
    </head>
    <body>
        <div id="app">
            <div v-for="item in list">
                {{ item }}
            </div>
        </div>

        <script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                    list: [1, 2, 3]
                },
                async created(){
                    // 最先输出3
                    console.log(3)
                    await setTimeout(()=>{
                        // 1输出的时间依赖于 定时间隔
                        console.log(1)
                    },100)
                    // 5的输出顺序也不是在1后面
                    console.log(5)
                },
                async mounted(){
                    // 其次输出4
                    console.log(4)
                    await setTimeout(()=>{
                        // 2输出的时间依赖于 定时间隔
                        console.log(2)
                    },100)
                    // 6的输出顺序也不是在2后面
                    console.log(6)
                }
            })
        </script>

    </body>
</html>

 

通过设置created和mounted中定时时间不同，查看控制台输出顺序。

完全乱套！

只能保证最先输出3 其次输出4。

await后的 5 和 6 也不是在await后输出。

 

结论是：所有的钩子函数都只是在指定时间执行而已，框架并不关心它们执行的结果，所以你要做的是将async和await放到真正有异步的methods的方法中。

 

更新！上面代码啪啪打脸！

await后不能接收非Promise对象。

请参考：https://www.jianshu.com/p/2afb088abd08

 

 await setTimeout(...) 或者 await exec(...) 是不行滴，await 不是什么都等，它等待的只是Promise，你如果没有给他返回个Promise，那它还是会继续向下执行。

所以 await 等待的不是所有的异步操作，等待的只是Promise。

所以await 挡不住啊！

posted @ 2018-11-22 11:43  孟繁贵  阅读(12713)  评论(3)  编辑  收藏  举报
TOP