當前位置：首頁 >

小哥哥小姐姐，来尝尝 Async 函数这块语法糖

發布時間：2024/1/8 54 豆豆

生活随笔收集整理的這篇文章主要介紹了小哥哥小姐姐，来尝尝 Async 函数这块语法糖小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

編者注：眾所周知，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事件分別注冊成功和錯誤處理函數：

下面的代碼展示了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種情況導致生成器暫?；蛲Ｖ箞绦?#xff1a;

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()中注冊的兌現反應函數，處理響應；請求失敗，則執行拒絕反應函數，處理錯誤。

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

注意，生成器函數（*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），讓瀏覽器能支持自己以同步風格編寫異步代碼的高效干活兒夢。

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

這是一個：

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

（調用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函數或者說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 函数这块语法糖的全部內容，希望文章能夠幫你解決所遇到的問題。

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