為什麼寫這篇文章?
說實話,關於js的異步執行順序,宏任務、微任務這些,或者async/await這些慨念已經有非常多的文章寫了。
但是怎麼說呢,簡單來說,業務中很少用async,不太懂async呢,
研究了一天,感覺懂了,所手癢想寫一篇 ,哈哈
畢竟自己學會的知識,如果連表達清楚都做不到,怎麼能指望自己用好它呢?
測試一下自己有沒有必要看
所以我寫這個的文章,主要還是交流學習,如果您已經清楚了eventloop/async/await/promise 這些東西呢,可以 break 啦。
那麼還是先通過一道題自我檢測一下,是否有必要繼續看下去把。
其實呢,這是去年一道爛大街的「今日頭條」的面試題 。
我覺得這道題的關鍵,不僅是說出正確的打印順序,更重要的能否說清楚每一個步驟,為什麼這樣執行。
注:因為是一道前端面試題,所以答案是以瀏覽器的eventloop機制為準的,在node平臺上運行會有差異。
如果你發現運行結果跟自己想的一樣,可以選擇跳過這篇文章啦,
或者如果你有興趣看看俺倆的理解有沒有區別,可以跳到後面的 「畫圖講解的部分」
需要具備的前置知識
promise的使用經驗
瀏覽器端的eventloop
不過如果是對 ES7 的 async 不太熟悉,是沒關係的哈,因為這篇文章會詳解 async。
那麼如果不具備這些知識呢,推薦幾篇我覺得講得比較清楚的文章
https://segmentfault.com/a/1190000012806637:這是我之前寫的講解eventloop的文章,我覺得還算清晰,但是沒涉及 async
https://segmentfault.com/a/1190000007535316:這是我讀過的講async await最清楚的文章
http://es6.ruanyifeng.com/#docs/promise:promise就推薦阮一峰老師的ES6吧,不過不熟悉 promise 的應該較少啦。
主要內容
第1部分:對於async await的理解
我推薦的那篇文章,對 async/await 講得更詳細。不過我希望自己能更加精煉的幫你理解它們。
這部分,主要會講解 3 點內容:
1、async 做一件什麼事情?
2、await 在等什麼?
3、await 等到之後,做了一件什麼事情?
4、補充: async/await 比 promise有哪些優勢?(回頭補充)
1、async 做一件什麼事情?
一句話概括: 帶 async 關鍵字的函數,它使得你的函數的返回值必定是 promise 對象。
也就是,如果async關鍵字函數返回的不是promise,會自動用 Promise.resolve() 包裝。
如果async關鍵字函數顯式地返回promise,那就以你返回的promise為準。
這是一個簡單的例子,可以看到 async 關鍵字函數和普通函數的返回值的區別:
所以你看,async 函數也沒啥了不起的,以後看到帶有 async 關鍵字的函數也不用慌張,你就想它無非就是把return值包裝了一下,其他就跟普通函數一樣。
關於async關鍵字還有那些要注意的?
在語義上要理解,async表示函數內部有異步操作
另外注意,一般 await 關鍵字要在 async 關鍵字函數的內部,await 寫在外面會報錯。
2、await 在等什麼?
一句話概括: await等的是右側「表達式」的結果。
也就是說,右側如果是函數,那麼函數的return值就是「表達式的結果」。
右側如果是一個 'hello' 或者什麼值,那表達式的結果就是 'hello'。
這裡注意一點,可能大家都知道await會讓出線程,阻塞後面的代碼,那麼上面例子中, async2 和>
是從左向右執行,一旦碰到await直接跳出,阻塞 async2() 的執行?
還是從右向左,先執行async2後,發現有await關鍵字,於是讓出線程,阻塞代碼呢?
實踐的結論是,從右向左的。先打印async2,後打印的>
之所以提一嘴,是因為我經常看到這樣的說法,「一旦遇到await就立刻讓出線程,阻塞後面的代碼」。
這樣的說法,會讓我誤以為,await後面那個函數, async2()也直接被阻塞呢。
3、await 等到之後,做了一件什麼事情?
那麼右側表達式的結果,就是await要等的東西。
等到之後,對於await來說,分2個情況:
不是promise對象
是promise對象
如果不是 promise , await會阻塞後面的代碼,先執行async外面的同步代碼,同步代碼執行完,再回到async內部,把這個非promise的東西,作為 await表達式的結果。
如果它等到的是一個 promise 對象,await 也會暫停async後面的代碼,先執行async外面的同步代碼,等著 Promise 對象 fulfilled,然後把 resolve 的參數作為 await 表達式的運算結果。
第2部分:畫圖一步步看清宏任務、微任務的執行過程
我們以開篇的經典面試題為例,分析這個例子中的宏任務和微任務。
先分享一個我個人理解的宏任務和微任務的慨念,在我腦海中宏任務和為微任務如圖所示:
也就是「宏任務」、「微任務」都是隊列。
一段代碼執行時,會先執行宏任務中的同步代碼:
如果執行中遇到setTimeout之類宏任務,那麼就把這個setTimeout內部的函數推入「宏任務的隊列」中,下一輪宏任務執行時調用。
如果執行中遇到promise.then()之類的微任務,就會推入到「當前宏任務的微任務隊列」中,在本輪宏任務的同步代碼執行都完成後,依次執行所有的微任務1、2、3。
下面就以面試題為例子,分析這段代碼的執行順序。
每次宏任務和微任務發生變化,我都會畫一個圖來表示他們的變化。
直接打印同步代碼 console.log('script start')
首先是2個函數聲明,雖然有async關鍵字,但不是調用我們就不看。然後首先是打印同步代碼 console.log('script start')。
將setTimeout放入宏任務隊列
默認 <script> 所包裹的代碼,其實可以理解為是第一個宏任務,所以這裡是宏任務2:
調用async1,打印 同步代碼 console.log('async1 start')
我們說過看到帶有async關鍵字的函數,不用害怕,它的僅僅是把return值包裝成了promise,其他並沒有什麼不同的地方。所以就很普通的打印 console.log('async1 start')。
分析一下 awaitasync2()
前文提過await,它先計算出右側的結果,然後看到await後,中斷async函數:
先得到await右側表達式的結果。執行async2(),打印同步代碼console.log('async2'),並且returnPromise.resolve(undefined)。
await後,中斷async函數,先執行async外的同步代碼。
目前就直接打印 console.log('async2'):
被阻塞後,要執行async之外的代碼。
執行 newPromise()
Promise構造函數是直接調用的同步代碼,所以 console.log('promise1'):
代碼運行到 promise.then()
代碼運行到promise.then(),發現這個是微任務,所以暫時不打印,只是推入當前宏任務的微任務隊列中。
注意:這裡只是把promise2推入微任務隊列,並沒有執行。微任務會在當前宏任務的同步代碼執行完畢,才會依次執行:
打印同步代碼 console.log('script end')
沒什麼好說的。執行完這個同步代碼後,「async外的代碼」終於走了一遍
下面該回到 await 表達式那裡,執行 awaitPromise.resolve(undefined) 了。
回到async內部,執行 awaitPromise.resolve(undefined)
這部分可能不太好理解,我儘量表達我的想法。
對於 awaitPromise.resolve(undefined) 如何理解呢?
https://developer.mozilla.org/zh-
CN/docs/Web/JavaScript/Reference/Operators/await
根據 MDN 原話我們知道:如果一個 Promise 被傳遞給一個 await 操作符,await 將等待 Promise 正常處理完成並返回其處理結果。
在我們這個例子中,就是 Promise.resolve(undefined) 正常處理完成,並返回其處理結果。那麼 awaitasync2() 就算是執行結束了。
目前這個promise的狀態是fulfilled,等其處理結果返回就可以執行await下面的代碼了。
那何時能拿到處理結果呢?
回憶平時我們用promise,調用resolve後,何時能拿到處理結果?是不是需要在then的第一個參數裡,才能拿到結果。
(調用resolve時,會把then的參數推入微任務隊列,等主線程空閒時,再調用它)。
所以這裡的 awaitPromise.resolve() 就類似於:
把then的第一個回調參數 (undefined)=>{} 推入微任務隊列。
then執行完,才是 awaitasync2() 執行結束。
awaitasync2() 執行結束,才能繼續執行後面的代碼,如圖:
此時當前宏任務1都執行完了,要處理微任務隊列裡的代碼。
微任務隊列,先進選出的原則:
執行微任務1,打印promise2
執行微任務2,沒什麼內容..
但是微任務2執行後, awaitasync2() 語句結束,後面的代碼不再被阻塞,所以打印:
宏任務1執行完成後,執行宏任務2
宏任務2的執行比較簡單,就是打印:
補充在不同瀏覽器上的測試結果
谷歌瀏覽器,目前是版本是「版本 71.0.3578.80(正式版本) (64 位)」 Mac操作系統
Safari瀏覽器的測試結果
火狐瀏覽器的測試結果
如果不理解可以留言,有錯誤的話也歡迎指正。
來自:https://segmentfault.com/a/1190000017224799
閱讀更多 千鋒Html5學習課堂 的文章