編者注：眾所周知，JS 最大的特性就是異步，異步提高了性能但是卻給我們編寫帶來了一定困難，造就了令人發指的回調地獄。為了解決這個問題，一個又一個的解決方案被提出來。今天我們請來了 《JavaScript 高級程序設計》等多本書的知名譯者 @李松峰 老師給我們講解下各種異步函數編寫的解決方案以及各種內涵。

本次內容是基于之前分享的文字版，若想看重點的話可以看之前的 PPT：ppt.baomitu.com/d/fd045abb
也可以查看之前的分享視頻：cloud.live.360vcloud.net/theater/pla…

---

ES7（ECMAScript 2016）推出了Async函數（async/await），實現了以順序、同步代碼的編寫方式來控制異步流程，徹底解決了困擾JavaScript開發者的“回調地獄”問題。比如，之前需要嵌套回調的異步邏輯：

const result = []; // pseudo-code, ajax stand for an asynchronous request ajax('url1', function(err, data){if(err) {...}result.push(data)ajax('url2', function(err, data){if(err) {...}result.push(data)console.log(result)}) }) 復制代碼

現在可以寫成如下同步代碼的樣式了：

async function example() {const r1 = await new Promise(resolve =>setTimeout(resolve, 500, 'slowest'))const r2 = await new Promise(resolve =>setTimeout(resolve, 200, 'slow'))return [r1, r2] }example().then(result => console.log(result)) // ['slowest', 'slow'] 復制代碼

Async函數需要在function前面添加async關鍵字，同時內部以await關鍵字來“阻塞”異步操作，直到異步操作返回結果，然后再繼續執行。在沒有Async函數以前，我們無法想象下面的異步代碼可以直接拿到結果：

const r1 = ajax('url') console.log(r1) // undefined 復制代碼

這當然是不可能的，異步函數的結果只能在回調里拿到。可以說，Async函數是JavaScript程序員在探索如何高效異步編程過程中踩“坑”之后的努力“自救”獲得的成果——不是“糖果”。然而，讀者小哥哥小姐姐可能有所不知，Async函數實際上是一個語法糖（果然是“糖果”嗎？），它的背后是ES6（ECMAScript 2015）中推出的Promise、Iterator和Generator，我們簡稱“PIG”。本文就帶各位好好品嘗品嘗這塊語法糖，感受一個PIG是如何成就Async函數的。

1. 當前JavaScript編程主要是異步編程

當前JavaScript編程主要是異步編程。為什么這么說呢？網頁或Web開發最早從2005年Ajax流行開始，逐步向重交互時代邁進。特別是SPA（Single Page Application，單頁應用）流行之后，一度有人提出“Web頁面要轉向Web應用，而且要媲美原生應用”。如今在前端開發組件化的背景下催生的Angular、React和Vue，都是SPA進一步演化的結果。

Web應用或開發重交互的特征越來越明顯，意味著什么？意味著按照瀏覽器這個運行時的特性，頁面在首次加載過程中，與JavaScript相關的主要任務就是加載基礎運行庫和擴展庫（包括給低版本瀏覽器打補丁的腳本），然后初始化和設置頁面的狀態。首次加載之后，用戶對頁面的操作、數據I/O以及DOM更新，就全部交由異步JavaScript腳本管理。所以，目前JavaScript編程最大的應用是Web交互，而Web交互的核心就是異步邏輯。

然而，ES6之前JavaScript中控制異步流程的手段只有事件和回調。比如下面的示例展示了通過原生XMLHttpRequest對象發送異步請求，然后給onload和onerror事件分別注冊成功和錯誤處理函數：

var req = new XMLHttpRequest(); req.open('GET', url);req.onload = function () {if (req.status == 200) {processData(req.response);} };req.onerror = function () {console.log('Network Error'); };req.send(); 復制代碼

下面的代碼展示了Node.js經典的“先傳錯誤”的回調。但這里要重點提一下，這種函數式編程風格也叫CPS，即Continuation Passing Style，我翻譯成“后續操作傳遞風格”。因為調用readFile傳入了表示后續操作的一個回調函數。這一塊就不展開了。

// Node.js fs.readFile('file.txt', function (error, data) {if (error) {// ...}console.log(data);} ); 復制代碼

事件和回調有很多問題，主要是它們只適用于簡單的情況。邏輯一復雜，代碼的編寫和維護成本就成倍上升。比如，大家熟知的“回調地獄”。更重要的是，回調模式的異步本質與人類同步、順序的思維模式是相悖的。

為了應對越來越復雜的異步編程需求，ES6推出了解決上述問題的Promise。

2. Promise

Promise，人們普遍的理解就是：“Promise是一個未來值的占位符”。也就是說，從語義上講，一個Promise對象代表一個對未來值的“承諾”（promise），這個承諾將來如果“兌現”（fulfill），就會“解決”（resolve）為一個有意義的數據；如果“拒絕”（reject），就會“解決”為一個“拒絕理由”（rejection reason），就是一個錯誤消息。

Promise對象的狀態很簡單，一生下來的狀態是pending（待定），將來兌現了，狀態變成fulfilled；拒絕了，狀態變成rejected。fulfilled和rejected顯然是一種“確定”（settled）狀態。以上狀態轉換是不可逆的，所以Promise很單純，好控制，哈哈。

以下是Promise相關的所有API。前3個是創建Promise對象的（稍后有例子），后4個中的前2個是用于注冊反應函數的（稍后有例子），后2個是用于控制并發和搶占的：

以下是通過Prmoise(executor)構造函數創建Promise實例的詳細過程：要傳入一個“執行函數”（executor），這個執行函數又接收兩個參數“解決函數”（resolver）和“拒絕函數”（rejector），代碼中分別對應變量resolve和reject，作用分別是將新建對象的狀態由pending改為fulfilled和rejected，同時返回“兌現值”（fulfillment）和“拒絕理由”（rejection）。當然，resolve和reject都是在異步操作的回調中調用的。調用之后，運行時環境（瀏覽器引擎或Node.js的libuv）中的事件循環調度機制會把與之相關的反應函數——兌現反應函數或拒絕反應函數以及相關的參數添加到“微任務”隊列，以便下一次“循檢”（tick）時調度到JavaScript線程去執行。

如前所述，Promise對象的狀態由pending變成fulfilled，就會執行“兌現反應函數”（fulfillment reaction）；而變成rejected，就會執行“拒絕反應函數”（rejection reaction）。如下例所示，常規的方式是通過p.then()注冊兌現函數，通過p.catch()注冊拒絕函數：

p.then(res => { // 兌現反應函數// res === 'random success' }) p.catch(err => { // 拒絕反應函數// err === 'random failure' }) 復制代碼

當然還有非常規的方式，而且有時候非常規方式可能更好用：

// 通過一個.then()方法同時注冊兌現和拒絕函數 p.then(res => {// handle response},err => {// handle error} ) // 通過.then()方法只注冊一個函數：兌現函數 p.then(res => {// handle response }) // 通過.then()方法只傳入拒絕函數，兌現函數的位置傳null p.then(null, err => {// handle error }) 復制代碼

關于Promise就這樣吧。ES6除了Promise，還推出了Iterator（迭代器）和Generator（生成器），于是就有成就Async函數的PIG組合。下面我們分別簡單看一看Iterator和Generator。

3. Iterator

要理解Iterator或者迭代器，最簡單的方式是看它的接口：

interface IteratorResult {done: boolean;value: any; } interface Iterator {next(): IteratorResult; } interface Iterable {[Symbol.iterator](): Iterator } 復制代碼

先從中間的Iterator看。

什么是迭代器？它是一個對象，有一個next()方法，每次調用next()方法，就會返回一個迭代器結果（看第一個接口IteratorResult）。而這個迭代器結果，同樣還是一個對象，這個對象有兩個屬性：done和value，其中done是一個布爾值，false表示迭代器迭代的序列沒有結束；true表示迭代器迭代的序列結束了。而value就是迭代器每次迭代真正返回的值。

再看最后一個接口Iterable，翻譯成“可迭代對象”，它有一個[Symbol.iterator]()方法，這個方法會返回一個迭代器。

可以結合前面的接口定義和下面這張圖來理解可迭代對象（實現了“可迭代協議”）、迭代器（實現了“迭代器協議”）和迭代器結果這3個簡單而又重要的概念（暫時理解不了也沒關系，后面還有一個無窮序列的例子，可以幫助大家理解）。

可迭代對象是一個我們非常熟悉的概念，數組、字符串以及ES6新增的集合類型Set和Map都是可迭代對象。這意味著什么呢？意味著我們可以通過E6新增的3個用于操作可迭代對象的語法：

• for...of
• [...iterable]
• Array.from(iterable)

注意 E6以前就有的以下語法不適用于可迭代對象：

• for...in
• Array#forEach

接下來我們看例子。

for (const item of sequence) {console.log(item)// 'i'// 't'// 'e'// 'r'// 'a'// 'b'// 'l'// 'e' }console.log([...sequence]) // ['i', 't', 'e', 'r', 'a', 'b', 'l', 'e']console.log(Array.from(sequence)) // ['i', 't', 'e', 'r', 'a', 'b', 'l', 'e'] 復制代碼

以上示例分別使用for...of、擴展操作符（...）和Array.from()方法來迭代了前面定義的sequence這個可迭代對象。

下面再看一個通過迭代器創建無窮序列的小例子，通過這個例子我們再來深入理解與迭代器相關的概念。

const random = {[Symbol.iterator]: () => ({next: () => ({ value: Math.random() })}) }// 運行這行代碼會怎么樣？ [...random] // 這行呢？ Array.from(random) 復制代碼

這個例子使用兩個ES6的箭頭函數定義了兩個方法，創建了三個對象。

最內層的對象{ value: Math.random() }很明顯是一個“迭代器結果”（IteratorResult）對象，因為它有一個value屬性和一個……，等等，done屬性呢？這里沒有定義done屬性，所以每次迭代（調用next()）時訪問IteratorResult.done都會返回false；所以這個迭代器結果的定義相當于{ value: Math.random() , done: false }。顯然，done永遠不可能是true，所以這是一個無窮隨機數序列！

interface IteratorResult {done: boolean;value: any; } 復制代碼

再往外看，返回這個迭代器結果對象的箭頭函數被賦值給了外層對象的next()方法。根據Iterator接口的定義，如果一個對象包含一個next()方法，而這個方法的返回值又是一個迭代器結果，那么這個對象是什么？沒錯，就是迭代器。好，第二個對象是一個迭代器！

interface Iterator {next(): IteratorResult; } 復制代碼

再往外看，返回這個迭代器對象的箭頭函數被賦值給了外層對象的[Symbol.iterator]()方法。根據Iterable接口的定義，如果一個對象包含一個[Symbol.iterator]()方法，而這個方法的返回值又是一個迭代器，那么這個對象是什么？沒錯，就是可迭代對象。

interface Iterable {[Symbol.iterator](): Iterator } 復制代碼

好，到現在我們應該徹底理解迭代器及其相關概念了。下面繼續看例子。前面的例子定義了一個可迭代對象random，這個對象的迭代器可以無限返回隨機數，所以：

// 運行這行代碼會怎么樣？ [...random] // 這行呢？ Array.from(random) 復制代碼

是的，這兩行代碼都會導致程序（或運行時）崩潰！因為迭代器會不停地運行，阻塞JavaScript執行線程，最終可能因占滿可用內存導致運行時停止響應，甚至崩潰。

那么訪問無窮序列的正確方式是什么？答案是使用解構賦值或給for...of循環設置退出條件：

const [one, another] = random // 解析賦值，取得前兩個隨機數 console.log(one) // 0.23235511826351285 console.log(another) // 0.28749457537196577for (const value of random) {if (value > 0.8) { // 退出條件，隨機數大于0.8則中斷循環break}console.log(value) } 復制代碼

當然，使用無窮序列還有更高級的方式，鑒于本文的目的，在此就不多介紹了。下面我們再說最后一個ES6的特性Generator。

4. Generator

依例，上接口：

interface Generator extends Iterator {next(value?: any): IteratorResult;[Symbol.iterator](): Iterator;throw(exception: any); } 復制代碼

能看來出生成器是什么嗎？僅從它的接口來看，它既是一個迭代器，又是一個可迭代對象。沒錯，生成器因此又是迭代器的“加強版”，為什么？因為生成器還提供了一個關鍵字yield，它返回的序列值會自動包裝在一個IteratorResult（迭代器結果）對象中，省去了我們手工編寫相應代碼的麻煩。下面就是一個生成器函數的定義：

function *gen() {yield 'a'yield 'b'return 'c' } 復制代碼

哎，接口定義的生成器不是一個對象嗎，怎么是一個函數啊？

實際上，說生成器是對象或是函數都不確切。但我們知道，調用生成器函數會返回一個迭代器（接口描述的就是這個對象），這個迭代器可以控制返回它的生成器函數封裝的邏輯和數據。從這個意義上說，生成器由生成器函數及其返回的迭代器兩部分組成。再換句話說，生成器是一個籠統的概念，是一個統稱。（別急，一會你就明白這樣理解生成器的意義何在了。）

本節剛開始說了，生成器（返回的對象）“既是一個迭代器，又是一個可迭代對象”。下面我們就來驗證一下：

const chars = gen() typeof chars[Symbol.iterator] === 'function' // chars是可迭代對象 typeof chars.next === 'function' // chars是迭代器 chars[Symbol.iterator]() === chars // chars的迭代器就是它本身 console.log(Array.from(chars)) // 可以對它使用Array.from // ['a', 'b'] console.log([...chars]) // 可以對它使用Array.from // ['a', 'b'] 復制代碼

通過代碼中的注釋我們得到了全部答案。這里有個小問題：“為什么迭代這個生成器返回的序列值中不包含字符'c'呢？”

原因在于，yield返回的迭代器結果對象的done屬性值都為false，所以'a'和'b'都是有效的序列值；而return返回的雖然也是迭代器結果對象，但done屬性的值卻是true，true表示序列結束，所以'c'不會包含在迭代結果中。（如果沒有return語句，代碼執行到生成器函數末尾，會隱式返回{ value: undefined, done: true}。相信這一點不說你也知道。）

以上只是生成器作為“加強版”迭代器的一面。接下來，我們要接觸生成器真正強大的另一面了！

生成器真正強大的地方，也是它有別于迭代器的地方，在于它不僅能在每次迭代返回值，而且還能接收值。（當然，生成器的概念里本身就有生成器函數嘛！函數當然可以接收參數嘍。）等等，可不僅僅是可以給生成器函數傳參，而是還可以給yield表達式傳參！

function *gen(x) {const y = x * (yield)return y }const it = gen(6) it.next() // {value: undefined, done: false} it.next(7) // {value: 42, done: true} 復制代碼

在上面這個簡單的生成器的例子中。我們定義了一個生成器函數*gen()，它接收一個參數x。函數體內只有一個yield表達式，好像啥也沒干。但是，yield表達式似乎是一個“值的占位符”，因為代碼在某個時刻會計算變量x與這個“值”的乘積，并把該乘積賦值給變量y。最后，函數返回y。

這有點費解，下面我們一步一步分析。

調用gen(6)創建生成器的迭代器it（前面說了，生成器包含迭代器及返回它的生成器函數），傳入數值6。

調用it.next()啟動生成器。此時生成器函數的代碼執行到第一個yield表達式處暫停，并返回undefined。（yield并沒閑著，它看后面沒有顯式要返回的值，就只能返回默認的undefined。）

調用it.next(7)恢復生成器執行。此時yield接收到傳入的數值7，立即恢復生成器函數代碼的執行，并把自己替換成數值7。

代碼計算：6 * 7，得到42，并把42賦給變量y，最后返回y。

生成器函數最終返回的值就是：{value: 42, done: true}。

這個例子中只有一個yield，假如還有更多的yield，則第4步會到第二個yield處再次暫停生成器函數的執行，返回一個值，之后重復第3、4步，即還可以通過再調用it.next()向生成器函數中傳入值。

我們簡單總結一下，每次調用it.next()，可能有下列4種情況導致生成器暫停或停止執行：

yield表達式返回序列中下一個值

return語句返回生成器函數的值（{ done: true }）

throw語句完全停止生成器執行（后面會詳細解釋）

到達生成器函數最后，隱式返回{ value: undefined, done: true}

注意 這里的return和throw既可以在生成器函數內部調用，也可以在生成器函數外部通過生成器的迭代器調用，比如：it.return(0)、it.throw(new Error('Oops'))。后面我們會給出相應的例子。

由此，我們了解到，生成器的獨到之處就在于它的yield關鍵字。這個yield有兩大神奇之處：一、它是生成器函數暫停和恢復執行的分界點；二、它是向外和向內傳值（包括錯誤/異常）的媒介。

提到錯誤/異常，下面我們就來重點看一看生成器如何處理異常。畢竟，錯誤處理是使用回調方式編寫異步代碼的時候最讓JavaScript程序員頭疼的地方之一。

4.1 同步錯誤處理

首先，我們看“由內而外”的錯誤傳遞，即從生成器函數內部把錯誤拋到迭代器代碼中。

function *main() {const x = yield "Hello World";yield x.toLowerCase(); // 導致異常！ }const it = main(); it.next().value; // Hello World try {it.next( 42 ); } catch (err) {console.error(err); // TypeError } 復制代碼

如代碼注釋所提示的，生成器函數的第二行代碼會導致異常（至于為什么，讀者可以自己“人肉”執行代碼，推演一下）。由于生成器函數內部沒有做異常處理，因此錯誤被拋給了生成器的迭代代碼，也就是it.next(42)這行代碼。好在這行代碼被一個try/catch包著，錯誤可以正常捕獲并處理。

接下來，再看“由外而內”（準確地說，應該是“由外而內再而外”）的錯誤傳遞。

function *main() {var x = yield "Hello World";console.log('never gets here'); }const it = main(); it.next().value; // Hello World try {it.throw('Oops'); // `*main()`會處理嗎？ } catch (err) { // 沒有！console.error(err); // Oops } 復制代碼

如代碼所示，迭代代碼通過it.throw('Oops')拋出異常。這個異常是拋到生成器函數內的（通過迭代器it）。拋進去之后，yield表達式發現自己收到一個“燙手的山芋”，看看周圍也沒有異常處理邏輯“護駕”，于是眼疾手快，迅速又把這個異常給拋了出來。迭代器it顯然是有準備的，它本意也是想先看看生成器函數內部有沒有邏輯負責異常處理（看注釋“ // *main()會處理嗎？”），“沒有！”，它自己的try/catch早已等候多時了。

4.2 異步迭代生成器

前面我們看到的對生成器的迭代傳值，包括傳遞錯誤，都是同步的。實際上，生成器的yield表達式真正（哦，又一個“真正”）強大的地方在于：它在暫停生成器代碼執行以后，不是必須等待迭代器代碼同步調用it.next()方法給它返回值，而是可以讓迭代器在一個異步操作的回調中取得返回值，然后再通過it.next(res)把值傳給它。

明白了嗎？yield可以等待一個異步操作的結果。從而讓本文開始提到的這種看似不可能的情況變成可能：

const r1 = ajax('url') console.log(r1) // undefined 復制代碼

怎么變呢，在異步操作前加個yield呀：

const r1 = yield ajax('url') console.log(r1) // 這次r1就是真正的響應結果了 復制代碼

我們還是以一個返回Promise的異步操作為例來說明這一點比較好。因為基于回調的異步操作，很容易可以轉換成基于Promise的異步操作（比如jQuery的$.ajax()或通過util.promisify把Node.js中的異步方法轉換成Promise）。

例子來了。這是一個純Promise的例子。

function foo(x,y) {return request("http://some.url.1/?x=" + x + "&y=" + y); }foo(11, 31).then(function(text){console.log(text);},function(err){console.error(err);} ); 復制代碼

函數foo(x, y)封裝了一個異步request請求，返回一個Promise。調用foo(11, 31)傳入參數后，request就向拼接好的URL發送請求，返回待定（pending）狀態的Promise對象。請求成功，則執行then()中注冊的兌現反應函數，處理響應；請求失敗，則執行拒絕反應函數，處理錯誤。

接下來我們要做的，就是將上面的代碼與生成器結合，讓生成器只關注發送請求和取得響應結果，而把異步操作的等待和回調處理邏輯作為實現細節抽象出來。（“作為細節”，對，我們的目標是只關注請求和結果，過程嘛，都是細節，哈哈～。）

function foo(x, y) {return request("http://some.url.1/?x=" + x + "&y=" + y); } function *main() {try {const result = yield foo(11, 31); // 異步函數調用！console.log( result );} catch (err) {console.error( err );} } const it = main(); const p = it.next().value; // 啟動生成器并取得Promise `p`p.then( // 等待Promise `p`解決function(res){it.next(res); // 把`text`傳給`*main()`并恢復其執行},function(err){it.throw(err); // 把`err`拋到`*main()`} ); 復制代碼

注意，生成器函數（*main）的yield表達式中出現了異步函數調用：foo(11, 31)。而我們就要做的，就是在迭代器代碼中通過it.next()拿到這個異步函數調用返回的Promise，然后正確地處理它。怎么處理？我們看代碼。

創建生成器的迭代器之后，const p = it.next().value;返回了Promise p。在p的兌現反應函數中，我們把拿到的響應res通過it.next(res)調用傳回了生成器函數中的yield。yield拿到響應結果res之后，立即恢復生成器代碼的執行，把res賦值給變量result。于是，我們成功地在生成器函數中，以同步代碼的書寫方式取得了異步請求的響應結果！神奇不？

（當然，如果異步請求發生錯誤，在p的拒絕反應函數中也會通過it.throw(err)把錯誤拋給生成器函數。但這個現在不重要。）

好啦，目標達成：我們利用生成器的同步代碼，實現了對異步操作的完美控制。然而，還有一個問題。上面例子中的生成器只包裝了一個異步操作，如果是多個異步操作怎么辦呢？這時候，最好有一段通用的用于處理生成器函數的代碼，無論其中包含多少異步操作，這段代碼都能自動完成對Promise的接收、等待和響應/錯誤傳遞等這些“細節”工作。

那不就是一個基于Promise的生成器運行程序嗎？

5. 通用的生成器運行程序

綜前所述，我們想要的是這樣一個結果：

function example() {return run(function *() {const r1 = yield new Promise(resolve =>setTimeout(resolve, 500, 'slowest'))const r2 = yield new Promise(resolve =>setTimeout(resolve, 200, 'slow'))return [r1, r2]}) }example().then(result => console.log(result)) // ['slowest', 'slow'] 復制代碼

即定義一個通用的運行函數run，它負責處理傳給它的生成器函數中包裝的任意多個異步操作。針對每個操作，它都會正確地返回異步結果，或者向生成器函數中拋出異常。而運行這個函數的最終結果，也是返回一個Promise，這個Promise包含生成器函數返回的所有異步操作的結果（上例）。

已經有聰明人實現了這樣的運行程序，下面我們就給出兩個實現，大家可以自己嘗試去運行一下，然后“人肉”執行，加深理解。

注意 在ES7推出Async函數之前，飽受回調之苦的JavaScript程序員就是靠類似的運行程序結合生成器給自己“續命”的。事實上，在ES6之前（沒有Promise、沒有生成器）的“蠻荒時代”，不屈不撓又足智多謀的JavaScript程序員們就已經摸索出/找到了Thenable（Promise的前身）和類似生成器的實現方法（比如regenerator），讓瀏覽器能支持自己以同步風格編寫異步代碼的高效干活兒夢。

苦哉！偉哉！悲夫，絞兮乎！

這是一個：

function run(gen) {const it = gen();return Promise.resolve().then( function handleNext(value){let next = it.next( value );return (function handleResult(next){if (next.done) {return next.value;} else {return Promise.resolve( next.value ).then(handleNext,function handleErr(err) {return Promise.resolve(it.throw( err )).then( handleResult );});} // if...else})(next); // handleResult(next)}); // handleNext(value) } 復制代碼

供參考的“人肉”執行過程

（調用run的代碼見本節開頭。）

這個run函數接收一個生成器函數作為參數，然后立即創建了生成器的迭代器it（看上面run函數的代碼）。

然后，它返回一個Promise，是通過Promise.resolve()直接創建的。

我們給這個Promise的.then()方法傳入了一個兌現反應函數（這個函數一定會被調用，因為Promise是兌現的），名叫handleNext(value)，它接收一個參數value。第一次調用時，不會傳入任何值，因此value的值是undefined。

接下來，第一次調用it.next(value)啟動生成器，傳入undefined。生成器的第一個yield會返回一個待定狀態的Promise，至少500ms之后才會解決。

此時變量next的值是{ value: < Promise?[pending]>, done: false}。

接著，把next傳給下面的IIFE（Immediately Invoked Function Expression，立即調用函數表達式），這個函數叫handleResult（處理結果）。

在handleResult(next)內部，首先檢查next.done，不等于true，進入else子句。此時通過Promise.resolve(next.value)包裝next.value：等待返回的Promise解決，解決之后拿到字符串值'Slowest'，然后傳給兌現反應函數handleNext(value)。

至此，第一個異步操作的前半程處理完畢。接著，再次調用handleNext(value)傳入字符串'Slowest'。迭代器再次調用next(value)把'Slowest'傳回生成器函數中的第一個yield，yield取得這個字符串，立即恢復生成器執行，把這個字符串賦值給變量r1。生成器函數中的代碼繼續執行，到第二個yield處暫停，此時創建并返回第二個最終值為'slow'的Promise，但此時Promise是待定狀態，200毫秒后才會解決。

繼續，在迭代器代碼中，變量next再次拿到一個對象{ value: <Promise [pending]>, done: false}。再次進入IIFE，傳入next。檢查next.done不等于false，在else塊中把next.value封裝到一個Promise.resolve(next.value)中……

看，下面又是一個：

function run(generator) {return new Promise((resolve, reject) => {const it = generator()step(() => it.next())function step(nextFn) {const result = runNext(nextFn)if (result.done) {resolve(result.value)return}Promise.resolve(result.value).then(value => step(() => it.next(value)), err => step(() => it.throw(err)))}function runNext(nextFn) {try {return nextFn()} catch (err) {reject(err)}}}) } 復制代碼

6. 為什么說Async函數是語法糖

有了這個運行函數，我們可以比較一下下面兩個example()函數:

第一個example()是通過生成器運行程序控制異步代碼；第二個example()是一個異步（Async）函數，通過async/await控制異步代碼。

它們的區別只在于前者多了一層run函數封裝，使用yield而不是await，而且沒有async關鍵字修飾。除此之外，核心代碼完全一樣！

現在，大家再看到類似下面的異步函數，能想到什么？

async function example() {const r1 = await new Promise(resolve =>setTimeout(resolve, 500, 'slowest'))const r2 = await new Promise(resolve =>setTimeout(resolve, 200, 'slow'))return [r1, r2] }example().then(result => console.log(result)) // ['slowest', 'slow'] 復制代碼

是的，Async函數或者說async/await就是基于Promise、Iterator和Generator構造的一塊充滿苦澀和香甜、讓人回味無窮的“語法糖”！記住，Async function = Promise + Iterator + Generator，或者“Async函數原來是PIG”。

7. 參考資料

• ECMAScript 2018
• Practical Modern JavaScript
• You Don't Know JS: Async & Performance
• Understanding ECMAScript 6
• Exploring ES6

總結

以上是生活随笔為你收集整理的小哥哥小姐姐，来尝尝 Async 函数这块语法糖的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。