async/await 執行順序詳解

隨着async/await正式歸入ES7標準，愈來愈多的人開始研究聽說是異步編程終級解決方案的 async/await。可是不少人對這個方法中內部怎麼執行的還不是很瞭解，本文是我看了一遍技術博客理解 JavaScript 的 async/await（若是對async／await不熟悉能夠先看下這篇文章）後拓展了一下，我理了一下await以後js的執行順序，但願能夠給別人解疑答惑，先簡單介紹一下async／await。

1. async/await 是一種編寫異步代碼的新方法。以前異步代碼的方案是回調和 promise。
2. async/await 是創建在 promise 的基礎上。
3. async/await 像 promise 同樣，也是非阻塞的。
4. 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);

結果

hello async Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: undefined}

結果返回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對象先推入隊列；