前言

雖然大家知道async/await，但是很多人對這個方法中內(nèi)部怎么執(zhí)行的還不是很了解，本文是我看了一遍技術(shù)博客理解 JavaScript 的 async/await（如果對async／await不熟悉可以先看下這篇文章）后拓展了一下，我理了一下await之后js的執(zhí)行順序，希望可以給別人解疑答惑，先簡單介紹一下async／await。

async怎么處理返回值

async function testAsync() { return "hello async";}let result = testAsync();console.log(result)

輸出結(jié)果：

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

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

如果asyn函數(shù)沒有返回值

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

結(jié)果

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

結(jié)果返回Promise.resolve(undefined) 。

await做了什么處理

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

很多人以為await會一直等待之后的表達(dá)式執(zhí)行完之后才會繼續(xù)執(zhí)行后面的代碼，實(shí)際上await是一個讓出線程的標(biāo)志。await后面的函數(shù)會先執(zhí)行一遍，然后就會跳出整個async函數(shù)來執(zhí)行后面js棧（后面會詳述）的代碼。等本輪事件循環(huán)執(zhí)行完了之后又會跳回到async函數(shù)中等待await

后面表達(dá)式的返回值，如果返回值為非promise則繼續(xù)執(zhí)行async函數(shù)后面的代碼，否則將返回的promise放入promise隊(duì)列（Promise的Job Queue）

async/await 執(zhí)行順序

先看一個例子

function testSometing() { console.log("執(zhí)行testSometing"); return "testSometing";}async function testAsync() { console.log("執(zhí)行testAsync"); return Promise.resolve("hello async");}async function test() { console.log("test start..."); const v1 = await testSometing();//關(guān)鍵點(diǎn)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");});//關(guān)鍵點(diǎn)2promise.then((val)=> console.log(val));console.log("test end...")

輸出結(jié)果：