8張圖幫你一步步看清 async/await 和 promise 的執行順序

發表於2018-12-12
  • 為什麼寫這篇文章?
  • 測試一下自己有沒有必要看
  • 需要具備的前置基礎知識
  • 主要內容
    • 對於async await的理解
    • 畫圖一步步看清巨集任務、微任務的執行過程

為什麼寫這篇文章?

說實話,關於js的非同步執行順序,巨集任務、微任務這些,或者async/await這些慨念已經有非常多的文章寫了。

但是怎麼說呢,簡單來說,業務中很少用async,不太懂async呢,

研究了一天,感覺懂了,所手癢想寫一篇 ,哈哈

畢竟自己學會的知識,如果連表達清楚都做不到,怎麼能指望自己用好它呢?

測試一下自己有沒有必要看

所以我寫這個的文章,主要還是交流學習,如果您已經清楚了eventloop/async/await/promise這些東西呢,可以 break 啦

有說的不對的地方,歡迎留言討論,

那麼還是先通過一道題自我檢測一下,是否有必要繼續看下去把。

其實呢,這是去年一道爛大街的「今日頭條」的面試題 。

我覺得這道題的關鍵,不僅是說出正確的列印順序,更重要的能否說清楚每一個步驟,為什麼這樣執行。

注:因為是一道前端面試題,所以答案是以瀏覽器的eventloop機制為準的,在node平臺上執行會有差異。

如果你發現執行結果跟自己想的一樣,可以選擇跳過這篇文章啦,

或者如果你有興趣看看俺倆的理解有沒有區別,可以跳到後面的 「畫圖講解的部分」

需要具備的前置知識

  • promise的使用經驗
  • 瀏覽器端的eventloop

不過如果是對 ES7 的 async 不太熟悉,是沒關係的哈,因為這篇文章會詳解 async。

那麼如果不具備這些知識呢,推薦幾篇我覺得講得比較清楚的文章

主要內容

第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’ 和 ‘script start’ 誰先列印呢?

是從左向右執行,一旦碰到await直接跳出, 阻塞async2()的執行?

還是從右向左,先執行async2後,發現有await關鍵字,於是讓出執行緒,阻塞程式碼呢?

實踐的結論是,從右向左的。先列印async2,後列印的script start

之所以提一嘴,是因為我經常看到這樣的說法,「一旦遇到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部分:畫圖一步步看清巨集任務、微任務的執行過程

我們以開篇的經典面試題為例,分析這個例子中的巨集任務和微任務。

先分享一個我個人理解的巨集任務和微任務的慨念,在我腦海中巨集任務和為微任務如圖所示

clipboard.png

也就是「巨集任務」、「微任務」都是佇列。

一段程式碼執行時,會先執行巨集任務中的同步程式碼,

  • 如果執行中遇到setTimeout之類巨集任務,那麼就把這個setTimeout內部的函式推入「巨集任務的佇列」中,下一輪巨集任務執行時呼叫。
  • 如果執行中遇到promise.then()之類的微任務,就會推入到「當前巨集任務的微任務佇列」中,在本輪巨集任務的同步程式碼執行都完成後,依次執行所有的微任務1、2、3

下面就以面試題為例子,分析這段程式碼的執行順序.

每次巨集任務和微任務發生變化,我都會畫一個圖來表示他們的變化。

直接列印同步程式碼 console.log(‘script start’)

clipboard.png

將setTimeout放入巨集任務佇列

clipboard.png

呼叫async1,列印 同步程式碼 console.log( ‘async1 start’ )

clipboard.png

分析一下 await async2()

clipboard.png

被阻塞後,要執行async之外的程式碼

執行new Promise(),Promise建構函式是直接呼叫的同步程式碼,所以 console.log( ‘promise1’ )

clipboard.png

程式碼執行到promise.then()

注意:這裡只是把promise2推入微任務佇列,並沒有執行。微任務會在當前巨集任務的同步程式碼執行完畢,才會依次執行

clipboard.png

列印同步程式碼 console.log( ‘script end’ )

clipboard.png

回到async內部,執行await Promise.resolve(undefined)

這部分可能不太好理解,我儘量表達我的想法。

對於 await Promise.resolve(undefined) 如何理解呢?

https://developer.mozilla.org…

根據 MDN 原話我們知道

如果一個 Promise 被傳遞給一個 await 操作符,await 將等待 Promise 正常處理完成並返回其處理結果。

在我們這個例子中,就是Promise.resolve(undefined)正常處理完成,並返回其處理結果。那麼await async2()就算是執行結束了。

目前這個promise的狀態是fulfilled,等其處理結果返回就可以執行await下面的程式碼了。

那何時能拿到處理結果呢?

回憶平時我們用promise,呼叫resolve後,何時能拿到處理結果?是不是需要在then的第一個引數裡,才能拿到結果。

(呼叫resolve時,會把then的引數推入微任務佇列,等主執行緒空閒時,再呼叫它)

所以這裡的 await Promise.resolve() 就類似於

把then的第一個回撥引數 (undefined) => {} 推入微任務佇列。

then執行完,才是await async2()執行結束。

await async2()執行結束,才能繼續執行後面的程式碼

如圖

clipboard.png

此時當前巨集任務1都執行完了,要處理微任務佇列裡的程式碼。

微任務佇列,先進先出的原則,

  • 執行微任務1,列印promise2
  • 執行微任務2,沒什麼內容..

但是微任務2執行後,await async2()語句結束,後面的程式碼不再被阻塞,所以列印

console.log( ‘async1 end’ )

巨集任務1執行完成後,執行巨集任務2

巨集任務2的執行比較簡單,就是列印

console.log(‘setTimeout’)

補充在不同瀏覽器上的測試結果

谷歌瀏覽器,目前是版本是「版本 71.0.3578.80(正式版本) (64 位)」 Mac作業系統

clipboard.png

Safari瀏覽器的測試結果

clipboard.png

火狐瀏覽器的測試結果

clipboard.png

如果不理解可以留言,有錯誤的話也歡迎指正。

關於執行順序

評論區有指出

  • Chrome72 dev版本的執行順序是Promise2後列印,
  • 或者是babel編譯過後的程式碼是promise2後列印。

我自己也實踐了一下babel編譯後的程式碼執行順序的確是promise2後列印的..

原因是ESMA最新規範的有修改,然後這一點的詳情,說實話我目前也不是很清楚,評論區有給出資料,可供參考討論。

https://github.com/rhinel/blo…

相關文章