vue 钩子函数 使用async await

时间：2023-01-16 17:33:22

示例：

<!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 挡不住啊！

标签：

相关文章