promise、async和await之實行遞次的那點事

2019年8月24日 136次阅读 来源: lvdingjin

原文地點：
https://lvdingjin.github.io/tech/2018/05/27/async-and-await.html

故事要從一道本日頭條的筆試題提及～
問題泉源：半年工作經驗本日頭條和美團面試題面經分享！！！！！

async function async1(){
    console.log('async1 start')
    await async2()
    console.log('async1 end')
}
async function async2(){
    console.log('async2')
}
console.log('script start')
setTimeout(function(){
    console.log('setTimeout') 
},0)  
async1();
new Promise(function(resolve){
    console.log('promise1')
    resolve();
}).then(function(){
    console.log('promise2')
})
console.log('script end')

求打印效果是什麼？

置信是個前端都曉得啦，這道問題考的就是js內里的事宜輪迴和回調行列咯～
本日題主假定看客都已相識了setTimeout是宏使命會在末了實行的條件（由於它不是本日要議論的重點），我們重要來講講promise、async和await之間的關聯。

先上準確答案：

script start
async1 start
async2
promise1
script end
promise2
async1 end
setTimeout

事實上，沒有在控制台實行打印之前，我以為它應該是如許輸出的：

script start
async1 start
async2
async1 end
promise1
script end
promise2
setTimeout

為何如許以為呢？由於我們（深刻地）曉得await以後的語句會等await表達式中的函數實行完獲得效果后，才會繼承實行。

MDN是如許形貌await的：

async 函數中能夠會有 await 表達式，這會使 async 函數停息實行，守候表達式中的 Promise 剖析完成後繼承實行 async 函數並返回處理效果。

會以為輸出效果是以上的模樣，是由於沒有真正邃曉這句話的寄義。

阮一峰先生的詮釋我以為更輕易邃曉：

async 函數返回一個 Promise 對象，當函數實行的時刻，一旦碰到 await 就會先返回，比及觸發的異步操縱完成，再接着實行函數體內背面的語句。

對啦就是如許，MDN形貌的停息實行，實際上是讓出了線程（跳出async函數體）然後繼承實行背面的劇本的。如許一來我們就邃曉了，所以我們再看看上面那道題，根據如許形貌那末他的輸出效果就應該是：

script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout

彷佛那裡不太對？對照控制台輸出的準確效果，咦～有兩句輸出是不一樣的呀！！

async1 end
promise2

為何會如許呢？這也是這道問題最難邃曉的一個處所。要搞邃曉這個事變，我們須要先來回憶一些觀點：

async

async function 聲明將定義一個返回 AsyncFunction 對象的異步函數。

當挪用一個 async 函數時，會返回一個 Promise 對象。當這個 async 函數返回一個值時，Promise 的 resolve 要領會擔任通報這個值；當 async 函數拋出非常時，Promise 的 reject 要領也會通報這個非常值。

所以你如今曉得咯，運用 async 定義的函數，當它被挪用時，它返回的實際上是一個Promise對象。

我們再來看看 await 表達式實行會返回什麼值。

await

語法：[return_value] = await expression;

表達式（express）：一個 Promise 對象或許任何要守候的值。

返回值（return_value）：返回 Promise 對象的處理效果。假如守候的不是 Promise 對象，則返回該值自身。

所以，當await操縱符背面的表達式是一個Promise的時刻，它的返回值，實際上就是Promise的回調函數resolve的參數。

邃曉了這兩個事變后，我還要再煩瑣兩句。我們都曉得Promise是一個馬上實行函數，然則他的勝利（或失利：reject）的回調函數resolve倒是一個異步實行的回調。當實行到resolve()時，這個使命會被放入到回調行列中，守候挪用棧有空閑時事宜輪迴再來取走它。

終究進入正文：解題

好了鋪墊完這些觀點，我們回過甚看上面那道問題疑心的那兩句癥結的處所（發起一邊對着問題一邊看剖析我怕我講的太快你跟不上啊哈哈😂）。

實行到 async1 這個函數時，起首會打印出“async1 start”（這個不必多說了吧，async 表達式定義的函數也是馬上實行的）；

然後實行到 await async2()，發明 async2 也是個 async 定義的函數，所以直接實行了“console.log(‘async2’)”，同時async2返回了一個Promise，划重點：此時返回的Promise會被放入到回調行列中守候，await會讓出線程（js是單線程還用我引見嗎），接下來就會跳出 async1函數 繼承往下實行。

然後實行到 new Promise，前面說過了promise是馬上實行的，所以先打印出來“promise1”，然後實行到 resolve 的時刻，resolve這個使命就被放到回調行列中（前面都講過了上課要好好聽啊喂）守候，然後跳出Promise繼承往下實行，輸出“script end”。

接下來是重頭戲。同步的事宜都輪迴實行完了，挪用棧如今已空出來了，那末事宜輪迴就會去回調行列內里取使命繼承放到挪用棧內里了。

這時刻取到的第一個使命，就是前面 async1 放進去的Promise，實行Promise時發明又碰到了他的真命天子resolve函數，划重點：這個resolve又會被放入使命行列繼承守候，然後再次跳出 async1函數 繼承下一個使命。

接下來取到的下一個使命，就是前面 new Promise 放進去的 resolve回調 啦 yohoo～這個resolve被放到挪用棧實行，並輸出“promise2”，然後繼承取下一個使命。

背面的事變置信你已猜到了，沒錯挪用棧再次空出來了，事宜輪迴就取到了下一個使命：歷經歷盡艱辛終究輪到的誰人Promise的resolve回調！！！實行它（啥也不會打印的，由於 async2 並沒有return東西，所以這個resolve的參數是undefined），此時 await 定義的這個 Promise 已實行完而且返回了效果，所以能夠繼承往下實行 async1函數 背面的使命了，那就是“console.log(‘async1 end’)”。

謎之疑心的那兩句實行效果（“promise2”、“async1 end”）就是如許來的～

總結

總結下來這道問題考的，實際上是以下幾個點：

  1. 挪用棧
  2. 事宜輪迴
  3. 使命行列
  4. promise的回調函數實行
  5. async表達式的返回值
  6. await表達式的作用和返回值

邃曉了這些，天然就邃曉了為何答案是如許（答出筆試題還要剖析給面試官緣由哈哈哈）～

關於挪用棧、事宜輪迴、使命行列能夠點這裏相識更細緻的形貌。

為了輕易人人直接貼圖:
《promise、async和await之實行遞次的那點事》

關於async和await的實行遞次這裏也有很細緻的剖析能夠參考～

材料參考：
https://segmentfault.com/a/1190000011296839
https://github.com/xitu/gold-miner/blob/master/TODO/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with.md

    原文作者：lvdingjin
    原文地址: https://segmentfault.com/a/1190000015057278
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞