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