async await、Promise、setTimeout執行順序

小山芋發表於2018-06-07
AIPromise

由題目見真知：

【題目】

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')
複製程式碼

答案：

script start
async1 start
async2
promise1
script end
promise2
async1 end
setTimeout
複製程式碼

相關知識點：

阮一峰老師的解釋我覺得更容易理解：

async 函式返回一個 Promise 物件，當函式執行的時候，一旦遇到 await 就會先返回，等到觸發的非同步操作完成，再接著執行函式體內後面的語句。 可以理解為，是讓出了執行緒，跳出了async 函式體

然後,下面的這個輸出順序，和我們預想的不一樣啊

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')”。

然後同步(這裡的回撥是可以算成同步，有的時候勉強成非同步)的執行完了，開始執行等待佇列中的定時器，輸出 setTimeout

總結

  1. 呼叫棧
  2. 事件迴圈
  3. 任務佇列
  4. promise的回撥函式執行
  5. async表示式的返回值
  6. await表示式的作用和返回值

佇列任務優先順序：promise.Trick()>promise的回撥>setTimeout>setImmediate

至此，該題的輸出結果分析完畢了，這類的執行結果可以用一句話總結，先執行同步程式碼，遇到非同步程式碼就先加入佇列，然後按入隊的順序執行非同步程式碼，最後執行setTimeout佇列的程式碼。

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

相關文章