亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

promise、async和await之執(zhí)行順序的那點(diǎn)事

高勝山 / 3203人閱讀

摘要：是這樣描述的函數(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)再來(lái)取走它。

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

故事要從一道今日頭條的筆試題說(shuō)起～
題目來(lái)源：半年工作經(jīng)驗(yàn)今日頭條和美團(tuán)面試題面經(jīng)分享?。。。?！

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)），我們主要來(lái)講講promise、async和await之間的關(guān)系。

先上正確答案：

script start
async1 start
async2
promise1
script end
promise2
async1 end
setTimeout

事實(shí)上，沒(méi)有在控制臺(tái)執(zhí)行打印之前，我覺(jué)得它應(yīng)該是這樣輸出的：

script start
async1 start
async2
async1 end
promise1
script end
promise2
setTimeout

為什么這樣認(rèn)為呢？因?yàn)槲覀儯ù譁\地）知道await之后的語(yǔ)句會(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)闆](méi)有真正理解這句話(huà)的含義。

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

async 函數(shù)返回一個(gè) Promise 對(duì)象，當(dāng)函數(shù)執(zhí)行的時(shí)候，一旦遇到 await 就會(huì)先返回，等到觸發(fā)的異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語(yǔ)句。

對(duì)啦就是這樣，MDN描述的暫停執(zhí)行，實(shí)際上是讓出了線(xiàn)程（跳出async函數(shù)體）然后繼續(xù)執(zhí)行后面的腳本的。這樣一來(lái)我們就明白了，所以我們?cè)倏纯瓷厦婺堑李}，按照這樣描述那么他的輸出結(jié)果就應(yīng)該是：

script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout

好像哪里不太對(duì)？對(duì)比控制臺(tái)輸出的正確結(jié)果，咦～有兩句輸出是不一樣的呀??！

async1 end
promise2

為什么會(huì)這樣呢？這也是這道題目最難理解的一個(gè)地方。要搞明白這個(gè)事情，我們需要先來(lái)回顧一些概念：

async 
async 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è)賮?lái)看看 await 表達(dá)式執(zhí)行會(huì)返回什么值。

await 
語(yǔ)法：[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ù)，但是他的成功（或失?。簉eject）的回調(diào)函數(shù)resolve卻是一個(gè)異步執(zhí)行的回調(diào)。當(dāng)執(zhí)行到resolve()時(shí)，這個(gè)任務(wù)會(huì)被放入到回調(diào)隊(duì)列中，等待調(diào)用棧有空閑時(shí)事件循環(huán)再來(lái)取走它。

終于進(jìn)入正文：解題

好了鋪墊完這些概念，我們回過(guò)頭看上面那道題目困惑的那兩句關(guān)鍵的地方（建議一邊對(duì)著題目一邊看解析我怕我講的太快你跟不上啊哈哈

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/95331.html

相關(guān)文章

  • 搞懂一道async await, promise， setTimeout執(zhí)行順序的前端面試題

    摘要：不再?gòu)U話(huà)，下面見(jiàn)題執(zhí)行執(zhí)行輸出結(jié)果執(zhí)行執(zhí)行這道題最難理解的地方和的執(zhí)行順序，前面的結(jié)果一般沒(méi)有異議，如果不明白，百度一下變可以理解。 先指明這道題是面試題的改版，原題可以看：promise、async和await之執(zhí)行順序的那點(diǎn)事這道題也不是我改的，出處見(jiàn)：async/await 執(zhí)行順序詳解 這兩篇文章寫(xiě)的非常好，我仔細(xì)琢磨了一下，感覺(jué)受益匪淺，決定記錄一下自己的理解。不再?gòu)U話(huà)，下面...

    Jrain 評(píng)論0 收藏0

  • 筆試題之Event Loop終極篇

    摘要：下面開(kāi)始分析開(kāi)頭的代碼第一輪事件循環(huán)流程整體作為第一個(gè)宏任務(wù)進(jìn)入主線(xiàn)程，遇到，輸出遇到函數(shù)聲明，聲明暫時(shí)不用管遇到，其回調(diào)函數(shù)被分發(fā)到微任務(wù)中。我們記為遇到，其回調(diào)函數(shù)被分發(fā)到宏任務(wù)中。 先上一道常見(jiàn)的筆試題 console.log(1); async function async1() { console.log(2); await async2(); con...

    niceforbear 評(píng)論0 收藏0

  • React Native Fetch封裝那點(diǎn)事...

    摘要：通過(guò)來(lái)對(duì)數(shù)據(jù)進(jìn)行轉(zhuǎn)化處理或最終暴露給調(diào)用者對(duì)異常的處理。封裝在實(shí)際開(kāi)發(fā)中，的都是相同的，不同的是請(qǐng)求的方法名與參數(shù)。上述提到的與的請(qǐng)求時(shí)機(jī)。下面來(lái)看下完整的封裝。 每一門(mén)語(yǔ)言都離不開(kāi)網(wǎng)絡(luò)請(qǐng)求，有自己的一套Networking Api。React Native使用的是Fetch。 今天我們來(lái)談?wù)勁cFetch相關(guān)的一些事情。 purpose 通過(guò)這篇文章，你將了解到以下幾點(diǎn)關(guān)于Fet...

    CatalpaFlat 評(píng)論0 收藏0

  • 關(guān)于性能優(yōu)化的那點(diǎn)事——函數(shù)節(jié)流

    摘要：函數(shù)節(jié)流背景中的函數(shù)大多數(shù)情況下都是由用戶(hù)主動(dòng)調(diào)用觸發(fā)的除非是函數(shù)本身的實(shí)現(xiàn)不合理否則一般不會(huì)遇到跟性能相關(guān)的問(wèn)題但在少數(shù)情況下函數(shù)的觸發(fā)不是由用戶(hù)直接控制的在這些場(chǎng)景下函數(shù)可能被非常頻繁調(diào)用而造成大的性能問(wèn)題場(chǎng)景事件事件滾動(dòng)事件共同的特征 函數(shù)節(jié)流 背景 javascript中的函數(shù)大多數(shù)情況下都是由用戶(hù)主動(dòng)調(diào)用觸發(fā)的, 除非是函數(shù)本身的實(shí)現(xiàn)不合理, 否則一般不會(huì)遇到跟性能相關(guān)的問(wèn)題...

    khlbat 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<