本篇內(nèi)容介紹了“v8是如何實(shí)現(xiàn)更快的await ”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

專(zhuān)注于為中小企業(yè)提供網(wǎng)站制作、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)渦陽(yáng)免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了成百上千企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

Example

首先看下代碼：

const p = Promise.resolve();

(async () => {

  await p;

  console.log("after:await");

})();

p.then(() => {

  console.log("tick:a");

}).then(() => {

  console.log("tick:b");

});

以 node v10 的執(zhí)行結(jié)果為準(zhǔn)，node v8 的實(shí)現(xiàn)是不符合ECMAScript 標(biāo)準(zhǔn)

優(yōu)秀的程序員總是能以簡(jiǎn)單的例子解釋復(fù)雜的原理。代碼很簡(jiǎn)單，但是執(zhí)行結(jié)果可能出乎很多人意料:

tick:a

tick:b

after:await

如果你已經(jīng)猜對(duì)了，本文的關(guān)鍵內(nèi)容你已經(jīng)掌握，不用往下看了:)。

為什么 after:await會(huì)出現(xiàn)在tick:a之后，甚至是tick:b之后？ 要理解其中的原理，我們可以做一個(gè)小實(shí)驗(yàn)。

將 await 翻譯成 promise

v8博客中是以偽代碼的方式解釋await的執(zhí)行邏輯:

原圖 https://v8.dev/_img/fast-async/await-under-the-hood.svg

我們可以用promise語(yǔ)法寫(xiě)成：

function foo2(v) {

  const implicit_promise = new Promise(resolve => {

    const promise = new Promise(res => res(v));

    promise.then(w => resolve(w));

  });

  return implicit_promise;

}

按照同樣的方式，可以將文章開(kāi)頭的代碼轉(zhuǎn)換成:

const p = Promise.resolve();

(() => {

  const implicit_promise = new Promise(resolve => {

    const promise = new Promise(res => res(p));

    promise.then(() => {

      console.log("after:await");

      resolve();

    });

  });

  return implicit_promise;

})();

p.then(() => {

  console.log("tick:a");

}).then(() => {

  console.log("tick:b");

});

經(jīng)過(guò)一些瑣碎的調(diào)試，發(fā)現(xiàn)問(wèn)題真正的關(guān)鍵代碼是這一句： const promise = new Promise(res => res(p));

Resolved with another promise

了解 Node.js 或?yàn)g覽器的事件循環(huán)的童鞋都知道，resolved promise 的回調(diào)函數(shù)（reaction）是放在一個(gè)單獨(dú)的隊(duì)列MicroTask Queue中。 這個(gè)隊(duì)列會(huì)在事件循環(huán)的階段結(jié)束的時(shí)候被執(zhí)行，只有當(dāng)這個(gè)隊(duì)列被清空后，才能進(jìn)入事件循環(huán)的下一個(gè)階段。

我們知道一個(gè) promise 的 .then 回調(diào)的返回值可以是一個(gè)任意值，也可以是另外一個(gè) promise。 但是后者的處理邏輯可能有點(diǎn)反直覺(jué)。

在深入之前，我們簡(jiǎn)單說(shuō)一下 promise 的幾種狀態(tài):

我們說(shuō)一個(gè) promise 是 resolved 的，表示它不能被再次 fulfill 或 reject， 要么是被 fulfill，要么被 reject（這兩種情況，promise 均有一個(gè)確定的 non-promise result）， 要么遵循另外一個(gè) promise（隨之 fulfill 或 reject）

我們說(shuō)一個(gè) promise 是 unresolved 的，表示它尚未被 resolve

當(dāng)一個(gè) promise（假設(shè)叫 promiseA。方便引用） 被 resolve，并且去遵循另外一個(gè) promise（叫 p） 時(shí)，執(zhí)行邏輯和前面兩種 resolve 情況非常不同，用偽代碼表示則是：

addToMicroTaskQueue(() => { // 任務(wù)A

  // 使用 .then 方法，將 promiseA 的狀態(tài) 和 p 綁定

  p.then(

    resolvePromiseA, // 任務(wù)B

    rejectPromiseA

  );

});

我們一步一步來(lái)分析：

首先，我們?cè)贛icroTask Queue添加任務(wù)A，該任務(wù)在 ECMAScript 標(biāo)準(zhǔn) 中被定義為 PromiseResolveThenableJob

任務(wù)A，主要目的是使 promiseA 遵循 p 的狀態(tài)，將兩者的狀態(tài)關(guān)聯(lián)起來(lái)。

由于我們例子中 p 已經(jīng)是 resolved(狀態(tài)為fulfilled)的，所以立即將resolvePromiseA任務(wù)B 添加到MicroTask Queue中

在 resolvePromiseA 執(zhí)行后，promiseA 才是 resolved (狀態(tài)為 fulfilled，值為 p 的 fulfilled value)

我們可以看到，從 new Promise(res=>res(p)) 到該調(diào)用返回的 promise 真正被 resolve 至少需要兩次microtick——在我們的例子中，是遍歷了兩次 MicroTask Queue

這個(gè)時(shí)候，我們終于可以理清楚開(kāi)頭代碼的執(zhí)行順序：

01月28日更新，之前微任務(wù)隊(duì)列里面的任務(wù)沒(méi)有考慮順序，這里做一下修改，以下隊(duì)列里的任務(wù)是順序有關(guān)，從左往右，左邊的先執(zhí)行

1、當(dāng)代碼執(zhí)行完后

MicroTask Queue有兩個(gè)任務(wù)：PromiseResolveThenableJob，tick:a

2、開(kāi)始執(zhí)行 runMicrotasks()

MicroTask Queue變成：resolvePromiseA，tick:b

console: tick:a

3、MicroTask Queue沒(méi)有清空，繼續(xù)執(zhí)行隊(duì)列中的任務(wù)

MicroTask Queue變成：after:await

console: tick:a, tick:b

4、繼續(xù)執(zhí)行，清空MicroTaak Queue

console: tick:a, tick:b, after:await

“v8是如何實(shí)現(xiàn)更快的await ”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！