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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM