資訊專欄INFORMATION COLUMN
摘要：是這樣描述的函數(shù)中可能會(huì)有表達(dá)式，這會(huì)使函數(shù)暫停執(zhí)行，等待表達(dá)式中的解析完成后繼續(xù)執(zhí)行函數(shù)并返回解決結(jié)果。返回值返回對(duì)象的處理結(jié)果。當(dāng)執(zhí)行到時(shí)，這個(gè)任務(wù)會(huì)被放入到回調(diào)隊(duì)列中，等待調(diào)用棧有空閑時(shí)事件循環(huán)再來取走它。
原文地址：https://lvdingjin.github.io/tech/2018/05/27/async-and-await.html
故事要從一道今日頭條的筆試題說起～
題目來源：半年工作經(jīng)驗(yàn)今日頭條和美團(tuán)面試題面經(jīng)分享?。。。。?/p>
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")
求打印結(jié)果是什么？
相信是個(gè)前端都知道啦，這道題目考的就是js里面的事件循環(huán)和回調(diào)隊(duì)列咯～
今天題主假設(shè)看客都已經(jīng)了解了setTimeout是宏任務(wù)會(huì)在最后執(zhí)行的前提（因?yàn)樗皇墙裉煲懻摰闹攸c(diǎn)），我們主要來講講promise、async和await之間的關(guān)系。
先上正確答案：
script start async1 start async2 promise1 script end promise2 async1 end setTimeout
事實(shí)上，沒有在控制臺(tái)執(zhí)行打印之前，我覺得它應(yīng)該是這樣輸出的：
script start async1 start async2 async1 end promise1 script end promise2 setTimeout
為什么這樣認(rèn)為呢？因?yàn)槲覀儯ù譁\地）知道await之后的語句會(huì)等await表達(dá)式中的函數(shù)執(zhí)行完得到結(jié)果后，才會(huì)繼續(xù)執(zhí)行。
MDN是這樣描述await的：
async 函數(shù)中可能會(huì)有 await 表達(dá)式，這會(huì)使 async 函數(shù)暫停執(zhí)行，等待表達(dá)式中的 Promise 解析完成后繼續(xù)執(zhí)行 async 函數(shù)并返回解決結(jié)果。
會(huì)認(rèn)為輸出結(jié)果是以上的樣子，是因?yàn)闆]有真正理解這句話的含義。
阮一峰老師的解釋我覺得更容易理解：
async 函數(shù)返回一個(gè) Promise 對(duì)象，當(dāng)函數(shù)執(zhí)行的時(shí)候，一旦遇到 await 就會(huì)先返回，等到觸發(fā)的異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語句。
對(duì)啦就是這樣，MDN描述的暫停執(zhí)行，實(shí)際上是讓出了線程（跳出async函數(shù)體）然后繼續(xù)執(zhí)行后面的腳本的。這樣一來我們就明白了，所以我們?cè)倏纯瓷厦婺堑李}，按照這樣描述那么他的輸出結(jié)果就應(yīng)該是：
script start async1 start async2 promise1 script end async1 end promise2 setTimeout
好像哪里不太對(duì)？對(duì)比控制臺(tái)輸出的正確結(jié)果，咦～有兩句輸出是不一樣的呀?。?/p>
async1 end promise2
為什么會(huì)這樣呢？這也是這道題目最難理解的一個(gè)地方。要搞明白這個(gè)事情，我們需要先來回顧一些概念：
asyncasync function 聲明將定義一個(gè)返回 AsyncFunction 對(duì)象的異步函數(shù)。當(dāng)調(diào)用一個(gè) async 函數(shù)時(shí)，會(huì)返回一個(gè) Promise 對(duì)象。當(dāng)這個(gè) async 函數(shù)返回一個(gè)值時(shí)，Promise 的 resolve 方法會(huì)負(fù)責(zé)傳遞這個(gè)值；當(dāng) async 函數(shù)拋出異常時(shí)，Promise 的 reject 方法也會(huì)傳遞這個(gè)異常值。
所以你現(xiàn)在知道咯，使用 async 定義的函數(shù)，當(dāng)它被調(diào)用時(shí)，它返回的其實(shí)是一個(gè)Promise對(duì)象。
我們?cè)賮砜纯?await 表達(dá)式執(zhí)行會(huì)返回什么值。
語法：[return_value] = await expression;表達(dá)式（express）：一個(gè) Promise 對(duì)象或者任何要等待的值。
返回值（return_value）：返回 Promise 對(duì)象的處理結(jié)果。如果等待的不是 Promise 對(duì)象，則返回該值本身。
所以，當(dāng)await操作符后面的表達(dá)式是一個(gè)Promise的時(shí)候，它的返回值，實(shí)際上就是Promise的回調(diào)函數(shù)resolve的參數(shù)。
明白了這兩個(gè)事情后，我還要再啰嗦兩句。我們都知道Promise是一個(gè)立即執(zhí)行函數(shù)，但是他的成功（或失敗：reject）的回調(diào)函數(shù)resolve卻是一個(gè)異步執(zhí)行的回調(diào)。當(dāng)執(zhí)行到resolve()時(shí)，這個(gè)任務(wù)會(huì)被放入到回調(diào)隊(duì)列中，等待調(diào)用棧有空閑時(shí)事件循環(huán)再來取走它。
終于進(jìn)入正文：解題好了鋪墊完這些概念，我們回過頭看上面那道題目困惑的那兩句關(guān)鍵的地方（建議一邊對(duì)著題目一邊看解析我怕我講的太快你跟不上啊哈哈
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/95331.html
摘要：不再?gòu)U話，下面見題執(zhí)行執(zhí)行輸出結(jié)果執(zhí)行執(zhí)行這道題最難理解的地方和的執(zhí)行順序，前面的結(jié)果一般沒有異議，如果不明白，百度一下變可以理解。 先指明這道題是面試題的改版，原題可以看：promise、async和await之執(zhí)行順序的那點(diǎn)事這道題也不是我改的，出處見：async/await 執(zhí)行順序詳解 這兩篇文章寫的非常好，我仔細(xì)琢磨了一下，感覺受益匪淺，決定記錄一下自己的理解。不再?gòu)U話，下面...
摘要：下面開始分析開頭的代碼第一輪事件循環(huán)流程整體作為第一個(gè)宏任務(wù)進(jìn)入主線程，遇到，輸出遇到函數(shù)聲明，聲明暫時(shí)不用管遇到，其回調(diào)函數(shù)被分發(fā)到微任務(wù)中。我們記為遇到，其回調(diào)函數(shù)被分發(fā)到宏任務(wù)中。 先上一道常見的筆試題 console.log(1); async function async1() { console.log(2); await async2(); con...
摘要：通過來對(duì)數(shù)據(jù)進(jìn)行轉(zhuǎn)化處理或最終暴露給調(diào)用者對(duì)異常的處理。封裝在實(shí)際開發(fā)中，的都是相同的，不同的是請(qǐng)求的方法名與參數(shù)。上述提到的與的請(qǐng)求時(shí)機(jī)。下面來看下完整的封裝。 每一門語言都離不開網(wǎng)絡(luò)請(qǐng)求，有自己的一套Networking Api。React Native使用的是Fetch。 今天我們來談?wù)勁cFetch相關(guān)的一些事情。 purpose 通過這篇文章，你將了解到以下幾點(diǎn)關(guān)于Fet...
摘要：函數(shù)節(jié)流背景中的函數(shù)大多數(shù)情況下都是由用戶主動(dòng)調(diào)用觸發(fā)的除非是函數(shù)本身的實(shí)現(xiàn)不合理否則一般不會(huì)遇到跟性能相關(guān)的問題但在少數(shù)情況下函數(shù)的觸發(fā)不是由用戶直接控制的在這些場(chǎng)景下函數(shù)可能被非常頻繁調(diào)用而造成大的性能問題場(chǎng)景事件事件滾動(dòng)事件共同的特征 函數(shù)節(jié)流 背景 javascript中的函數(shù)大多數(shù)情況下都是由用戶主動(dòng)調(diào)用觸發(fā)的, 除非是函數(shù)本身的實(shí)現(xiàn)不合理, 否則一般不會(huì)遇到跟性能相關(guān)的問題...
閱讀 3041·2021-11-25 09:43
閱讀 3678·2021-11-24 11:13
閱讀 3438·2021-10-14 09:42
閱讀 2656·2021-09-23 11:53
閱讀 3680·2021-09-22 15:57
閱讀 3290·2021-09-02 09:54
閱讀 3561·2019-08-30 13:47
閱讀 1696·2019-08-29 16:55
