摘要：最受歡迎的引擎是，在和中使用，用于，以及所使用的。怎么處理每個引擎都有一個基本組件，稱為調(diào)用棧。也就是說，如果有其他函數(shù)等待執(zhí)行，函數(shù)是不能離開調(diào)用棧的。每個異步函數(shù)在被送入調(diào)用棧之前必須通過回調(diào)隊(duì)列。例如方法是在中傳遞的回調(diào)函數(shù)。

?

翻譯：瘋狂的技術(shù)宅

原文：www.valentinog.com/blog/engine…

從Call Stack，Global Memory，Event Loop，Callback Queue到 Promises 和 Async/Await 的 JavaScript引擎之旅！

?

你有沒有想過瀏覽器是如何讀取和運(yùn)行 JavaScript 代碼的嗎？這看起來很神奇，但你可以學(xué)到一些發(fā)生在幕后的事情。讓我們通過介紹 JavaScript 引擎的精彩世界在這種語言中盡情暢游。

在 Chrome 中打開瀏覽器控制臺，然后查看“Sources”標(biāo)簽。你會看到一個有趣的命名：Call Stack（在Firefox中，你可以在代碼中插入一個斷點(diǎn)后看到調(diào)用棧）：

?

什么是調(diào)用棧（Call Stack）？看上去像是有很多東西正在運(yùn)行，即使是只執(zhí)行幾行代碼也是如此。實(shí)際上，并不是在所有 Web 瀏覽器上都能對 JavaScript 做到開箱即用。

有一個很大的組件來編譯和解釋我們的 JavaScript 代碼：它就是 JavaScript 引擎。最受歡迎的 JavaScript 引擎是V8，在 Google Chrome 和 Node.js 中使用，SpiderMonkey 用于 Firefox，以及 Safari/WebKit 所使用的 JavaScriptCore。

今天的 JavaScript 引擎是個很杰出的工程，盡管它不可能覆蓋瀏覽器工作的方方面面，但是每個引擎都有一些較小的部件在為我們努力工作。

其中一個組件是調(diào)用棧，它與全局內(nèi)存和執(zhí)行上下文一起運(yùn)行我們的代碼。你準(zhǔn)備好迎接他們了嗎？

JavaScript 引擎和全局內(nèi)存

我認(rèn)為 JavaScript 既是編譯型語言又是解釋型語言。信不信由你，JavaScript 引擎在執(zhí)行之前實(shí)際上編譯了你的代碼。

是不是聽起來很神奇？這種魔術(shù)被稱為 JIT（即時編譯）。它本身就是一個很大的話題，即使是一本書也不足以描述 JIT 的工作原理。但是現(xiàn)在我們可以跳過編譯背后的理論，專注于執(zhí)行階段，這仍然是很有趣的。

先看以下代碼：

?

var num = 2; function pow(num) { return num * num; }

如果我問你如何在瀏覽器中處理上述代碼？你會說些什么？你可能會說“瀏覽器讀取代碼”或“瀏覽器執(zhí)行代碼”。

現(xiàn)實(shí)中比那更加微妙。首先不是瀏覽器而是引擎讀取該代碼片段。 JavaScript引擎讀取代碼，當(dāng)遇到第一行時，就會將一些引用放入全局內(nèi)存中。

**全局內(nèi)存（也稱為堆）**是 JavaScript 引擎用來保存變量和函數(shù)聲明的區(qū)域。所以回到前面的例子，當(dāng)引擎讀取上面的代碼時，全局內(nèi)存中被填充了兩個綁定：

?

即使例子中只有變量和函數(shù)，也要考慮你的 JavaScript 代碼在更大的環(huán)境中運(yùn)行：瀏覽器或在 Node.js 中。在這些環(huán)境中，有許多預(yù)定義的函數(shù)和變量，被稱為全局。全局內(nèi)存將比 num 和 pow 所占用的空間更多。記住這一點(diǎn)。

此時沒有執(zhí)行任何操作，但是如果嘗試像這樣運(yùn)行我們的函數(shù)會怎么樣：

?

var num = 2; function pow(num) { return num * num; } pow(num);

將會發(fā)生什么？現(xiàn)在事情變得有趣了。當(dāng)一個函數(shù)被調(diào)用時，JavaScript 引擎會為另外兩個盒子騰出空間：

全局執(zhí)行上下文環(huán)境

調(diào)用棧

全局執(zhí)行上下文和調(diào)用棧

在上一節(jié)你了解了 JavaScript 引擎是如何讀取變量和函數(shù)聲明的，他們最終進(jìn)入了全局內(nèi)存（堆）。

但是現(xiàn)在我們執(zhí)行了一個 JavaScript 函數(shù)，引擎必須要處理它。怎么處理？每個 JavaScript 引擎都有一個基本組件，稱為調(diào)用棧。

調(diào)用棧是一個棧數(shù)據(jù)結(jié)構(gòu)：這意味著元素可以從頂部進(jìn)入，但如果在它們上面還有一些元素，就不能離開棧。 JavaScript 函數(shù)就是這樣的。

當(dāng)函數(shù)開始執(zhí)行時，如果被某些其他函數(shù)卡住，那么它無法離開調(diào)用堆棧。請注意，因?yàn)?strong>這個概念有助于理解“JavaScript是單線程”這句話。

但是現(xiàn)在讓我們回到上面的例子。 當(dāng)調(diào)用該函數(shù)時，引擎會將該函數(shù)壓入調(diào)用堆棧中：

?

我喜歡將調(diào)用棧看作是一疊薯片。如果還沒有先吃掉頂部的所有薯片，就吃不到到底部的薯片！幸運(yùn)的是我們的函數(shù)是同步的：它是一個簡單的乘法，可以很快的得到計(jì)算結(jié)果。

同時，引擎還分配了全局執(zhí)行上下文，這是 JavaScript 代碼運(yùn)行的全局環(huán)境。這是它的樣子：

?

想象一下全局執(zhí)行環(huán)境作為一個海洋，其中 JavaScript 全局函數(shù)就像魚一樣在里面游泳。多么美好！但這只是故事的一半。如果函數(shù)有一些嵌套變量或一個或多個內(nèi)部函數(shù)怎么辦？

即使在下面的簡單變體中，JavaScript 引擎也會創(chuàng)建本地執(zhí)行上下文：

?

var num = 2; function pow(num) { var fixed = 89; return num * num; } pow(num);

請注意，我在函數(shù) pow 中添加了一個名為 fixed 的變量。在這種情況下，本地執(zhí)行上下文中將包含一個用于保持固定的框。我不太擅長在小方框里畫更小的框！你現(xiàn)在必須運(yùn)用自己的想象力。

本地執(zhí)行上下文將出現(xiàn)在 pow 附近，包含在全局執(zhí)行上下文中的綠色框內(nèi)。 你還可以想象，對于嵌套函數(shù)中的每個嵌套函數(shù)，引擎都會創(chuàng)建更多的本地執(zhí)行上下文。這些框可以很快的到達(dá)它們該去的地方。

單線程的JavaScript

我們說 JavaScript 是單線程的，因?yàn)橛幸粋€調(diào)用棧處理我們的函數(shù)。也就是說，如果有其他函數(shù)等待執(zhí)行，函數(shù)是不能離開調(diào)用棧的。

當(dāng)處理同步代碼時，這不是什么問題。例如，計(jì)算兩個數(shù)字的和就是同步的，并且以微秒做為運(yùn)行單位。但是當(dāng)進(jìn)行網(wǎng)絡(luò)通信和與外界的互動時呢？

幸運(yùn)的是 JavaScript引擎被默認(rèn)設(shè)計(jì)為異步。即使他們一次可以執(zhí)行一個函數(shù)，也有一種方法可以讓外部實(shí)體執(zhí)行較慢的函數(shù)：在我們的例子中是瀏覽器。我們稍后會探討這個話題。

這時，你應(yīng)該了解到當(dāng)瀏覽器加載某些 JavaScript 代碼時，引擎會逐行讀取并執(zhí)行以下步驟：

使用變量和函數(shù)聲明填充全局內(nèi)存（堆）

將每個函數(shù)調(diào)用送到調(diào)用棧

創(chuàng)建一個全局執(zhí)行上下文，其在中執(zhí)行全局函數(shù)

創(chuàng)建了許多微小的本地執(zhí)行上下文（如果有內(nèi)部變量或嵌套函數(shù)）

到此為止，你腦子里應(yīng)該有了一個 JavaScript 引擎同步機(jī)制的全景圖。在接下來的部分中，你將看到異步代碼如何在 JavaScript 中工作以及為什么這樣工作。

異步JavaScript，回調(diào)隊(duì)列和事件循環(huán)

全局內(nèi)存、執(zhí)行上下文和調(diào)用棧解釋了同步 JavaScript 代碼在瀏覽器中的運(yùn)行方式。然而我們還錯過了一些東西。當(dāng)有異步函數(shù)運(yùn)行時會發(fā)生什么？

我所指的異步函數(shù)是每次與外界的互動都需要一些時間才能完成的函數(shù)。例如調(diào)用 REST API 或調(diào)用計(jì)時器是異步的，因?yàn)樗鼈兛赡苄枰獛酌腌姴拍苓\(yùn)行完畢。 現(xiàn)在的 JavaScript 引擎都有辦法處理這種函數(shù)而不會阻塞調(diào)用堆棧，瀏覽器也是如此。

請記住，調(diào)用堆棧一次只可以執(zhí)行一個函數(shù)，**甚至一個阻塞函數(shù)都可以直接凍結(jié)瀏覽器。**幸運(yùn)的是，JavaScript 引擎非常智能，并且能在瀏覽器的幫助下解決問題。

當(dāng)我們運(yùn)行異步函數(shù)時，瀏覽器會接受該函數(shù)并運(yùn)行它?？紤]下面的計(jì)時器：

?

setTimeout(callback, 10000); function callback(){ console.log("hello timer!"); }

你肯定多次見到過 setTimeout ，但是你可能不知道它不是一個內(nèi)置的 JavaScript 函數(shù)。即當(dāng) JavaScript 誕生時，語言中并沒有內(nèi)置的 setTimeout。

實(shí)際上 setTimeout 是所謂的 Browser API 的一部分，它是瀏覽器提供給我們的便利工具的集合。多么體貼！這在實(shí)踐中意味著什么？由于 setTimeout 是一個瀏覽器 API，該函數(shù)由瀏覽器直接運(yùn)行（它會暫時出現(xiàn)在調(diào)用棧中，但會立即刪除）。

然后 10 秒后瀏覽器接受我們傳入的回調(diào)函數(shù)并將其移動到回調(diào)隊(duì)列。此時我們的 JavaScript 引擎中還有兩個框。請看以下代碼：

?

var num = 2; function pow(num) { return num * num; } pow(num); setTimeout(callback, 10000); function callback(){ console.log("hello timer!"); }

可以這樣畫完成我們的圖：

?

如你所見 setTimeout 在瀏覽器上下文中運(yùn)行。 10秒后，計(jì)時器被觸發(fā)，回調(diào)函數(shù)準(zhǔn)備好運(yùn)行。但首先它必須通過回調(diào)隊(duì)列?；卣{(diào)隊(duì)列是一個隊(duì)列數(shù)據(jù)結(jié)構(gòu)，顧名思義是一個有序的函數(shù)隊(duì)列。

每個**異步函數(shù)在被送入調(diào)用棧之前必須通過回調(diào)隊(duì)列。**但誰推動了這個函數(shù)呢？還有另一個名為 Event Loop 的組件。

Event Loop 現(xiàn)在只做一件事：它應(yīng)檢查調(diào)用棧是否為空。如果回調(diào)隊(duì)列中有一些函數(shù)，并且如果調(diào)用棧是空閑的，那么這時應(yīng)將回調(diào)送到調(diào)用棧。在完成后執(zhí)行該函數(shù)。

這是用于處理異步和同步代碼的 JavaScript 引擎的大圖：

?

想象一下，callback() 已準(zhǔn)備好執(zhí)行。當(dāng) pow() 完成時，**調(diào)用棧為空，事件循環(huán)推送 **callback()。就是這樣！即使我簡化了一些東西，如果你理解了上面的圖，那么就可以理解 JavaScript 的一切了。

請記住：Browser API、回調(diào)隊(duì)列和事件循環(huán)是異步 JavaScript 的支柱。

如果你喜歡視頻，我建議去看 Philip Roberts 的視頻：事件循環(huán)是什么。這是關(guān)于時間循環(huán)的最好的解釋之一。

堅(jiān)持下去，因?yàn)槲覀冞€沒有使用異步 JavaScript。在后面的內(nèi)容中，我們將詳細(xì)介紹 ES6 Promises。

回調(diào)地獄和 ES6 的 Promise

JavaScript 中的回調(diào)函數(shù)無處不在。它們用于同步和異步代碼。例如 map 方法：

?

function mapper(element){ return element * 2; } [1, 2, 3, 4, 5].map(mapper);

mapper 是在 map 中傳遞的回調(diào)函數(shù)。上面的代碼是同步的。但要考慮一個間隔：

?

function runMeEvery(){ console.log("Ran!"); } setInterval(runMeEvery, 5000);

該代碼是異步的，我們在 setInterval 中傳遞了回調(diào) runMeEvery?；卣{(diào)在 JavaScript 中很普遍，所以近幾年里出現(xiàn)了一個問題：回調(diào)地獄。

JavaScript中的回調(diào)地獄指的是編程的“風(fēng)格”，回調(diào)嵌套在嵌套在…...其他回調(diào)中的回調(diào)中。正是由于 JavaScript 的異步性質(zhì)導(dǎo)致程序員掉進(jìn)了這個陷阱。

說實(shí)話，我從來沒有碰到過極端的回調(diào)金字塔，也許是因?yàn)槲抑匾暣a的可讀性，并且總是試著堅(jiān)持這個原則。如果你發(fā)現(xiàn)自己掉進(jìn)了回調(diào)地獄，那就說明你的函數(shù)太多了。

我不會在這里討論回調(diào)地獄，如果你很感興趣的話，給你推薦一個網(wǎng)站： callbackhell.com 更深入地探討了這個問題并提供了一些解決方案。我們現(xiàn)在要關(guān)注的是 ES6 Promise。 ES6 Promise 是對 JavaScript 語言的補(bǔ)充，旨在解決可怕的回調(diào)地獄。但 Promise 是什么？

JavaScript Promise 是未來事件的表示。Promise 能夠以 success 結(jié)束：用行話說就是它已經(jīng) resolved（已經(jīng)完成）。但如果 Promise 出錯，我們會說它處于rejected狀態(tài)。 Promise 也有一個默認(rèn)狀態(tài)：每個新Promise都以 pending 狀態(tài)開始。

創(chuàng)建和使用 Promise

要創(chuàng)建新的 Promise，可以通過將回調(diào)函數(shù)傳給要調(diào)用的 Promise 構(gòu)造函數(shù)的方法?；卣{(diào)函數(shù)可以使用兩個參數(shù)：resolve 和 reject。讓我們創(chuàng)建一個新的 Promise，它將在5秒后 resolve（你可以在瀏覽器的控制臺中嘗試這些例子）：

?

const myPromise = new Promise(function(resolve){ setTimeout(function(){ resolve() }, 5000) });

如你所見，resolve 是一個函數(shù)，我們調(diào)用它使 Promise 成功。下面的例子中 reject 將得到 rejected 的 Promise：

?

const myPromise = new Promise(function(resolve, reject){ setTimeout(function(){ reject() }, 5000) });

請注意，在第一個示例中，你可以省略 reject ，因?yàn)樗堑诙€參數(shù)。但是如果你打算使用 reject**，就不能省略 resolve**。換句話說，以下代碼將無法工作，最終將以 resolved 的 Promise 結(jié)束：

?

// Can"t omit resolve ! const myPromise = new Promise(function(reject){ setTimeout(function(){ reject() }, 5000) });

現(xiàn)在 Promise 看起來不是那么有用。這些例子不向用戶打印任何內(nèi)容。讓我們添加一些數(shù)據(jù)。 resolved 的和rejected 的 Promises 都可以返回數(shù)據(jù)。這是一個例子：

?

const myPromise = new Promise(function(resolve) { resolve([{ name: "Chris" }]); });

但我們?nèi)匀豢床坏饺魏螖?shù)據(jù)。 要從 Promise 中提取數(shù)據(jù)，你還需要一個名為 then 的方法。它需要一個回調(diào)（真是具有諷刺意味！）來接收實(shí)際的數(shù)據(jù)：

?

const myPromise = new Promise(function(resolve, reject) { resolve([{ name: "Chris" }]); }); myPromise.then(function(data) { console.log(data); });

作為 JavaScript 開發(fā)人員，你將主要與來自外部的 Promises 進(jìn)行交互。相反，庫的開發(fā)者更有可能將遺留代碼包裝在 Promise 構(gòu)造函數(shù)中，如下所示：

?

const shinyNewUtil = new Promise(function(resolve, reject) { // do stuff and resolve // or reject });

在需要時，我們還可以通過調(diào)用 Promise.resolve() 來創(chuàng)建和解決 Promise：

?

Promise.resolve({ msg: "Resolve!"}) .then(msg => console.log(msg));

所以回顧一下，JavaScript Promise 是未來發(fā)生的事件的書簽。事件以掛起狀態(tài)開始，可以成功（resolved，fulfilled）或失敗（rejected）。 Promise 可以返回數(shù)據(jù)，通過把 then 附加到 Promise 來提取數(shù)據(jù)。在下一節(jié)中，我們將看到如何處理來自 Promise 的錯誤。

ES6 Promise 中的錯誤處理

JavaScript 中的錯誤處理一直很簡單，至少對于同步代碼而言。請看下面的例子：

?

function makeAnError() { throw Error("Sorry mate!"); } try { makeAnError(); } catch (error) { console.log("Catching the error! " + error); }

輸出將是：

?

Catching the error! Error: Sorry mate!

錯誤在 catch 塊中被捕獲?，F(xiàn)在讓我們嘗試使用異步函數(shù)：

?

function makeAnError() { throw Error("Sorry mate!"); } try { setTimeout(makeAnError, 5000); } catch (error) { console.log("Catching the error! " + error); }

由于 setTimeout，上面的代碼是異步的。如果運(yùn)行它會發(fā)生什么？

?

throw Error("Sorry mate!"); ^ Error: Sorry mate! at Timeout.makeAnError [as _onTimeout] (/home/valentino/Code/piccolo-javascript/async.js:2:9)

這次輸出是不同的。錯誤沒有通過 catch塊。它可以自由地在棧中傳播。

那是因?yàn)?try/catch 僅適用于同步代碼。如果你感到好奇，可以在 Node.js 中的錯誤處理中得到該問題的詳細(xì)解釋。

幸運(yùn)的是，Promise 有一種處理異步錯誤的方法，就像它們是同步的一樣。

?

const myPromise = new Promise(function(resolve, reject) { reject("Errored, sorry!"); });

在上面的例子中，我們可以用 catch 處理程序錯誤，再次采取回調(diào)：

?

const myPromise = new Promise(function(resolve, reject) { reject("Errored, sorry!"); }); myPromise.catch(err => console.log(err));

我們也可以調(diào)用 Promise.reject() 來創(chuàng)建和 reject Promise：

?

Promise.reject({msg: "Rejected!"}).catch(err => console.log(err));

ES6 Promise 組合器：Promise.all，Promise.allSettled，Promise.any和它們的小伙伴

Promise 并不是在孤軍奮戰(zhàn)。 Promise API 提供了一系列將 Promise 組合在一起的方法。其中最有用的是Promise.all，它接受一系列 Promise 并返回一個Promise。問題是當(dāng)任何一個Promise rejected時，Promise.all 就會 rejects 。

Promise.race 在數(shù)組中的一個 Promise 結(jié)束后立即 resolves 或 reject。如果其中一個Promise rejects ，它仍然會rejects。

較新版本的 V8 也將實(shí)現(xiàn)兩個新的組合器：**Promise.allSettled **和 Promise.any。 Promise.any 仍處于提案的早期階段：在撰寫本文時，還不支持。

Promise.any 可以表明任何 Promise 是否 fullfilled。與 Promise.race 的區(qū)別在于 Promise.any 不會 reject，即使是其中一個Promise 被 rejected。

最有趣的是 Promise.allSettled。它仍然需要一系列的 Promise，但如果其中一個 Promise rejects 的話 ，它不會被短路。當(dāng)你想要檢查 Promise 數(shù)組中是否全部已解決時，它是有用的。可以認(rèn)為它總是和 Promise.all 對著干。

ES6 Promise 和 microtask 隊(duì)列

如果你還記得前面的章節(jié)**，JavaScript 中的每個異步回調(diào)函數(shù)都會在被推入調(diào)用棧之前在回調(diào)隊(duì)列中結(jié)束**。但是在 Promise 中傳遞的回調(diào)函數(shù)有不同的命運(yùn)：它們由微任務(wù)隊(duì)列處理，而不是由回調(diào)隊(duì)列處理。

你應(yīng)該注意一個有趣的現(xiàn)象：微任務(wù)隊(duì)列優(yōu)先于回調(diào)隊(duì)列。當(dāng)事件循環(huán)檢查是否有任何新的回調(diào)準(zhǔn)備好被推入調(diào)用棧時，來自微任務(wù)隊(duì)列的回調(diào)具有優(yōu)先權(quán)。

Jake Archibald 在任務(wù)、微任務(wù)、隊(duì)列和時間表一文中更詳細(xì)地介紹了這些機(jī)制，這是一篇很棒的文章。

異步的進(jìn)化：從 Promise 到 async/await

JavaScript 正在快速發(fā)展，每年我們都會不斷改進(jìn)語言。Promise 似乎是到達(dá)了終點(diǎn)，但 **ECMAScript 2017（ES8）的新語法誕生了：async / await **。

async/await 只是一種風(fēng)格上的改進(jìn)，我們稱之為語法糖。 async/await 不會以任何方式改變 JavaScript（請記住，JavaScript 必須向后兼容舊瀏覽器，不應(yīng)破壞現(xiàn)有代碼）。

它只是一種基于 Promise 編寫異步代碼的新方法。讓我們舉個例子。之前我們用 then 的 Promise：

?

const myPromise = new Promise(function(resolve, reject) { resolve([{ name: "Chris" }]); }); myPromise.then((data) => console.log(data))

現(xiàn)在使用async/await，我們可以從另一個角度看待用同步的方式處理異步代碼。我們可以將 Promise 包裝在標(biāo)記為 async 的函數(shù)中，然后等待結(jié)果：

?

const myPromise = new Promise(function(resolve, reject) { resolve([{ name: "Chris" }]); }); async function getData() { const data = await myPromise; console.log(data); } getData();

現(xiàn)在有趣的是異步函數(shù)將始終返回 Promise，并且沒人能阻止你這樣做：

?

async function getData() { const data = await myPromise; return data; } getData().then(data => console.log(data));

怎么處理錯誤呢？ async/await 提供的一個好處就是有機(jī)會使用 try/catch。 （參見異步函數(shù)中的異常處理及測試方法 ）。讓我們再看一下Promise，我們使用catch處理程序來處理錯誤：

?

const myPromise = new Promise(function(resolve, reject) { reject("Errored, sorry!"); }); myPromise.catch(err => console.log(err));

使用異步函數(shù)，我們可以重構(gòu)以下代碼：

?

async function getData() { try { const data = await myPromise; console.log(data); // or return the data with return data } catch (error) { console.log(error); } } getData();

不是每個人都會用這種風(fēng)格。 try/catch 會使你的代碼混亂。雖然用 try/catch還有另一個問題要指出。請看以下代碼，在try塊中引發(fā)錯誤：

?

async function getData() { try { if (true) { throw Error("Catch me if you can"); } } catch (err) { console.log(err.message); } } getData() .then(() => console.log("I will run no matter what!")) .catch(() => console.log("Catching err"));

哪一字符串會打印到控制臺？請記住，try/catch是一個同步構(gòu)造，但我們的異步函數(shù)會產(chǎn)生一個 Promise。他們在兩條不同的軌道上行駛，就像兩列火車。但他們永遠(yuǎn)不會碰面！也就是說，throw 引發(fā)的錯誤永遠(yuǎn)不會觸發(fā) getData() 的 catch 處理程序。運(yùn)行上面的代碼將導(dǎo)致 “抓住我，如果你可以”，然后“不管怎樣我都會跑！”。

實(shí)際上我們不希望 throw 觸發(fā)當(dāng)前的處理。一種可能的解決方案是從函數(shù)返回 Promise.reject()：

?

async function getData() { try { if (true) { return Promise.reject("Catch me if you can"); } } catch (err) { console.log(err.message); } }

現(xiàn)在錯誤將按預(yù)期處理：

?

getData() .then(() => console.log("I will NOT run no matter what!")) .catch(() => console.log("Catching err")); "Catching err" // output

除此之外 async/await 似乎是在 JavaScript 中構(gòu)建異步代碼的最佳方式。我們可以更好地控制錯誤處理，代碼看起來更清晰。

我不建議把所有的 JavaScript 代碼都重構(gòu)為 async/await。這必須是與團(tuán)隊(duì)討論之后的選擇。但是如果你自己工作的話，無論你使用簡單的 Promise 還是 async/await 都是屬于個人偏好的問題。

總結(jié)

JavaScript 是一種用于Web的腳本語言，具有先被編譯然后再由引擎解釋的特性。在最流行的 JavaScript 引擎中，有 Google Chrome 和 Node.js 使用的V8，為網(wǎng)絡(luò)瀏覽器 Firefox 構(gòu)建的 SpiderMonkey，由Safari使用的 JavaScriptCore。

JavaScript 引擎有很多部分組成：調(diào)用棧、全局內(nèi)存、事件循環(huán)和回調(diào)隊(duì)列。所有這些部分在完美的調(diào)整中協(xié)同工作，以便在 JavaScript 中處理同步和異步代碼。

JavaScript 引擎是單線程的，這意味著只有一個用于運(yùn)行函數(shù)的調(diào)用堆棧。這種限制是 JavaScript 異步性質(zhì)的基礎(chǔ)：所有需要時間的操作必須由外部實(shí)體（例如瀏覽器）或回調(diào)函數(shù)負(fù)責(zé)。

為了簡化異步代碼流程，ECMAScript 2015 給我們帶來了 Promises。 Promise 是一個異步對象，用于表示異步操作的失敗或成功。但改進(jìn)并沒有止步于此。 2017年 async/await誕生了：它是 Promise 的一種風(fēng)格上的彌補(bǔ)，可以用來編寫異步代碼，就好像它是同步的一樣。

歡迎關(guān)注前端公眾號：前端先鋒，獲取前端工程化實(shí)用工具包。