JS中的async/await的執行順序詳解

• 2019 年 10 月 4 日
• 筆記

雖然大家知道async/await，但是很多人對這個方法中內部怎麼執行的還不是很了解，本文是我看了一遍技術部落格理解 JavaScript 的 async/await（如果對async／await不熟悉可以先看下http://es6.ruanyifeng.com/#docs/async）後拓展了一下，我理了一下await之後js的執行順序，希望可以給別人解疑答惑，先簡單介紹一下async／await。

• async/await 是一種編寫非同步程式碼的新方法。之前非同步程式碼的方案是回調和 promise。
• async/await 是建立在 promise 的基礎上。
• async/await 像 promise 一樣，也是非阻塞的。
• async/await 讓非同步程式碼看起來、表現起來更像同步程式碼。這正是其威力所在。

async怎麼處理返回值

async function testAsync() {   return "hello async";  }  let result = testAsync();  console.log(result)  //輸出結果：Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: "hello async"  

從結果中可以看到async函數返回的是一個promise對象，如果在函數中 return 一個直接量，async 會把這個直接量通過 Promise.resolve() 封裝成 Promise 對象。

如果asyn函數沒有返回值

async function testAsync1() {   console.log("hello async");  }  let result1 = testAsync1();  console.log(result1);  

結果返回Promise.resolve(undefined) 。

await做了什麼處理

從字面意思上看await就是等待，await 等待的是一個表達式，這個表達式的返回值可以是一個promise對象也可以是其他值。

很多人以為await會一直等待之後的表達式執行完之後才會繼續執行後面的程式碼，實際上await是一個讓出執行緒的標誌。await後面的函數會先執行一遍，然後就會跳出整個async函數來執行後面js棧（後面會詳述）的程式碼。等本輪事件循環執行完了之後又會跳回到async函數中等待await

後面表達式的返回值，如果返回值為非promise則繼續執行async函數後面的程式碼，否則將返回的promise放入promise隊列（Promise的Job Queue）

async/await 執行順序

先看一個例子

function testSometing() {   console.log("執行testSometing");   return "testSometing";  }    async function testAsync() {   console.log("執行testAsync");   return Promise.resolve("hello async");  }    async function test() {   console.log("test start...");   const v1 = await testSometing();//關鍵點1   console.log(v1);   const v2 = await testAsync();   console.log(v2);   console.log(v1, v2);  }    test();    var promise = new Promise((resolve)=> { console.log("promise start.."); resolve("promise");});//關鍵點2  promise.then((val)=> console.log(val));    console.log("test end...")

輸出結果：

test start...  執行testSometing  promise start..  test end...  testSometing  執行testAsync  promise  hello async  testSometing hello async

當test函數執行到

const v1 = await testSometing()；

的時候，會先執行testSometing這個函數列印出「執行testSometing」的字元串，然後因為await會讓出執行緒就會區執行後面的

var promise = new Promise((resolve)=> { console.log("promise  start.."); resolve("promise");});//關鍵點2

然後列印出「promise start..」接下來會把返回的這promise放入promise隊列（Promise的Job Queue），繼續執行列印「test end…」，等本輪事件循環執行結束後，又會跳回到async函數中（test函數），等待之前await 後面表達式的返回值，因為testSometing 不是async函數，所以返回的是一個字元串「testSometing」，test函數繼續執行，執行到

const v2 = await testAsync();

和之前一樣又會跳出test函數，執行後續程式碼，此時事件循環就到了promise的隊列，執行promise.then((val)=> console.log(val));then後面的語句，之後和前面一樣又跳回到test函數繼續執行。

這個就是在async/await 函數之後js的執行順序，我們再看一個列子把testSometing函數前面加上async

async function testSometing() {   console.log("執行testSometing");   return "testSometing";  }    async function testAsync() {   console.log("執行testAsync");   return Promise.resolve("hello async");  }    async function test() {   console.log("test start...");   const v1 = await testSometing();   console.log(v1);   const v2 = await testAsync();   console.log(v2);   console.log(v1, v2);  }    test();    var promise = new Promise((resolve)=> { console.log("promise start.."); resolve("promise");});//3  promise.then((val)=> console.log(val));    console.log("test end...")

輸出結果：

test start...  執行testSometing  promise start..  test end...  promise  testSometing  執行testAsync  hello async  testSometing hello async

和上一個例子比較發現promise.then((val)=> console.log(val));先與console.log(v1);執行了，原因是因為現在testSometing函數加了async，返回的是一個Promise對象要要等它resolve，所以將當前Promise推入隊列，所以會繼續跳出test函數執行後續程式碼。之後就開始執行promise的任務隊列了，所/以先執行了promise.then((val)=> console.log(val));因為這個Promise對象先推入隊列；

總結

寫到這裡大家應該已經清楚了使用async/await進行非同步操作時js的執行順序。如果大家對有什麼意見或建議可以指出,希望大家不吝賜教。