“睡服”面试官系列第二十篇之generator函数的异步应用（建议收藏学习）
目錄
?
1. 傳統方法
2. 基本概念
2.1異步
2.2回調函數
2.3Promise
3. Generator 函數
3.1協程
3.2協程的 Generator 函數實現
3.3Generator 函數的數據交換和錯誤處理
3.4異步任務的封裝
4. Thunk 函數
4.1參數的求值策略
4.2Thunk 函數的含義
4.3JavaScript 語言的 Thunk 函數
4.4Thunkify 模塊
4.5Generator 函數的流程管理
4.6Thunk 函數的自動流程管理
5. co 模塊
5.1基本用法
5.2co 模塊的原理
5.3基于 Promise 對象的自動執行
5.4co 模塊的源碼
5.5處理并發的異步操作
5.6實例：處理 Stream
1. 傳統方法
ES6 誕生以前，異步編程的方法，大概有下面四種。
回調函數
事件監聽
發布/訂閱
Promise 對象
Generator 函數將 JavaScript 異步編程帶入了一個全新的階段
2. 基本概念
2.1異步
所謂"異步"，簡單說就是一個任務不是連續完成的，可以理解成該任務被人為分成兩段，先執行第一段，然后轉而執行其他任務，等做好了準備，再回過頭
執行第二段。
比如，有一個任務是讀取文件進行處理，任務的第一段是向操作系統發出請求，要求讀取文件。然后，程序執行其他任務，等到操作系統返回文件，再接
著執行任務的第二段（處理文件）。這種不連續的執行，就叫做異步。
相應地，連續的執行就叫做同步。由于是連續執行，不能插入其他任務，所以操作系統從硬盤讀取文件的這段時間，程序只能干等著。
2.2回調函數
JavaScript 語言對異步編程的實現，就是回調函數。所謂回調函數，就是把任務的第二段單獨寫在一個函數里面，等到重新執行這個任務的時候，就直接
調用這個函數。回調函數的英語名字 callback ，直譯過來就是"重新調用"。
讀取文件進行處理，是這樣寫的。
上面代碼中， readFile 函數的第三個參數，就是回調函數，也就是任務的第二段。等到操作系統返回了 /etc/passwd 這個文件以后，回調函數才會執行。
一個有趣的問題是，為什么 Node 約定，回調函數的第一個參數，必須是錯誤對象 err （如果沒有錯誤，該參數就是 null ）？
原因是執行分成兩段，第一段執行完以后，任務所在的上下文環境就已經結束了。在這以后拋出的錯誤，原來的上下文環境已經無法捕捉，只能當作參
數，傳入第二段。
2.3Promise
回調函數本身并沒有問題，它的問題出現在多個回調函數嵌套。假定讀取 A 文件之后，再讀取 B 文件，代碼如下。
fs.readFile(fileA, 'utf-8', function (err, data) { fs.readFile(fileB, 'utf-8', function (err, data) { // ... }); });不難想象，如果依次讀取兩個以上的文件，就會出現多重嵌套。代碼不是縱向發展，而是橫向發展，很快就會亂成一團，無法管理。因為多個異步操作形
成了強耦合，只要有一個操作需要修改，它的上層回調函數和下層回調函數，可能都要跟著修改。這種情況就稱為"回調函數地獄"（callback hell）。
Promise 對象就是為了解決這個問題而提出的。它不是新的語法功能，而是一種新的寫法，允許將回調函數的嵌套，改成鏈式調用。采用 Promise，連續
讀取多個文件，寫法如下。
上面代碼中，我使用了 fs-readfile-promise 模塊，它的作用就是返回一個 Promise 版本的 readFile 函數。Promise 提供 then 方法加載回調函數，
catch 方法捕捉執行過程中拋出的錯誤。
可以看到，Promise 的寫法只是回調函數的改進，使用 then 方法以后，異步任務的兩段執行看得更清楚了，除此以外，并無新意。
Promise 的最大問題是代碼冗余，原來的任務被 Promise 包裝了一下，不管什么操作，一眼看去都是一堆 then ，原來的語義變得很不清楚。
那么，有沒有更好的寫法呢？
3. Generator 函數
3.1協程
傳統的編程語言，早有異步編程的解決方案（其實是多任務的解決方案）。其中有一種叫做"協程"（coroutine），意思是多個線程互相協作，完成異步任
務。
協程有點像函數，又有點像線程。它的運行流程大致如下。
第一步，協程 A 開始執行。
第二步，協程 A 執行到一半，進入暫停，執行權轉移到協程 B 。
第三步，（一段時間后）協程 B 交還執行權。
第四步，協程 A 恢復執行。
上面流程的協程 A ，就是異步任務，因為它分成兩段（或多段）執行。
舉例來說，讀取文件的協程寫法如下。
上面代碼的函數 asyncJob 是一個協程，它的奧妙就在其中的 yield 命令。它表示執行到此處，執行權將交給其他協程。也就是說， yield 命令是異步兩個
階段的分界線。
協程遇到 yield 命令就暫停，等到執行權返回，再從暫停的地方繼續往后執行。它的最大優點，就是代碼的寫法非常像同步操作，如果去除 yield 命令，
簡直一模一樣。
3.2協程的 Generator 函數實現
Generator 函數是協程在 ES6 的實現，最大特點就是可以交出函數的執行權（即暫停執行）。
整個 Generator 函數就是一個封裝的異步任務，或者說是異步任務的容器。異步操作需要暫停的地方，都用 yield 語句注明。Generator 函數的執行方
法如下。
上面代碼中，調用 Generator 函數，會返回一個內部指針（即遍歷器） g 。這是 Generator 函數不同于普通函數的另一個地方，即執行它不會返回結
果，返回的是指針對象。調用指針 g 的 next 方法，會移動內部指針（即執行異步任務的第一段），指向第一個遇到的 yield 語句，上例是執行到 x + 2 為
止。
換言之， next 方法的作用是分階段執行 Generator 函數。每次調用 next 方法，會返回一個對象，表示當前階段的信息（ value 屬性和 done 屬性）。
value 屬性是 yield 語句后面表達式的值，表示當前階段的值； done 屬性是一個布爾值，表示 Generator 函數是否執行完畢，即是否還有下一個階段
3.3Generator 函數的數據交換和錯誤處理
Generator 函數可以暫停執行和恢復執行，這是它能封裝異步任務的根本原因。除此之外，它還有兩個特性，使它可以作為異步編程的完整解決方案：函
數體內外的數據交換和錯誤處理機制。
next 返回值的 value 屬性，是 Generator 函數向外輸出數據； next 方法還可以接受參數，向 Generator 函數體內輸入數據。
上面代碼中，第一 next 方法的 value 屬性，返回表達式 x + 2 的值 3 。第二個 next 方法帶有參數 2 ，這個參數可以傳入 Generator 函數，作為上個階段
異步任務的返回結果，被函數體內的變量 y 接收。因此，這一步的 value 屬性，返回的就是 2 （變量 y 的值）。
Generator 函數內部還可以部署錯誤處理代碼，捕獲函數體外拋出的錯誤。
上面代碼的最后一行，Generator 函數體外，使用指針對象的 throw 方法拋出的錯誤，可以被函數體內的 try...catch 代碼塊捕獲。這意味著，出錯的代
碼與處理錯誤的代碼，實現了時間和空間上的分離，這對于異步編程無疑是很重要的。
3.4異步任務的封裝
下面看看如何使用 Generator 函數，執行一個真實的異步任務。
var fetch = require('node-fetch'); function* gen(){ var url = 'https://api.github.com/users/github'; var result = yield fetch(url); console.log(result.bio); }上面代碼中，Generator 函數封裝了一個異步操作，該操作先讀取一個遠程接口，然后從 JSON 格式的數據解析信息。就像前面說過的，這段代碼非常像
同步操作，除了加上了 yield 命令。
執行這段代碼的方法如下
上面代碼中，首先執行 Generator 函數，獲取遍歷器對象，然后使用 next 方法（第二行），執行異步任務的第一階段。由于 Fetch 模塊返回的是一個
Promise 對象，因此要用 then 方法調用下一個 next 方法。
可以看到，雖然 Generator 函數將異步操作表示得很簡潔，但是流程管理卻不方便（即何時執行第一階段、何時執行第二階段）
4. Thunk 函數
Thunk 函數是自動執行 Generator 函數的一種方法。
4.1參數的求值策略
Thunk 函數早在上個世紀 60 年代就誕生了。
那時，編程語言剛剛起步，計算機學家還在研究，編譯器怎么寫比較好。一個爭論的焦點是"求值策略"，即函數的參數到底應該何時求值。
上面代碼先定義函數 f ，然后向它傳入表達式 x + 5 。請問，這個表達式應該何時求值？
一種意見是"傳值調用"（call by value），即在進入函數體之前，就計算 x + 5 的值（等于 6），再將這個值傳入函數 f 。C 語言就采用這種策略。
另一種意見是“傳名調用”（call by name），即直接將表達式 x + 5 傳入函數體，只在用到它的時候求值。Haskell 語言采用這種策略。
f(x + 5) // 傳名調用時，等同于 (x + 5) * 2傳值調用和傳名調用，哪一種比較好？
回答是各有利弊。傳值調用比較簡單，但是對參數求值的時候，實際上還沒用到這個參數，有可能造成性能損失。
上面代碼中，函數 f 的第一個參數是一個復雜的表達式，但是函數體內根本沒用到。對這個參數求值，實際上是不必要的。因此，有一些計算機學家傾向
于"傳名調用"，即只在執行時求值。
4.2Thunk 函數的含義
編譯器的“傳名調用”實現，往往是將參數放到一個臨時函數之中，再將這個臨時函數傳入函數體。這個臨時函數就叫做 Thunk 函數
function f(m) { return m * 2; } f(x + 5); // 等同于 var thunk = function () { return x + 5; }; function f(thunk) { return thunk() * 2; }上面代碼中，函數 f 的參數 x + 5 被一個函數替換了。凡是用到原參數的地方，對 Thunk 函數求值即可。
這就是 Thunk 函數的定義，它是“傳名調用”的一種實現策略，用來替換某個表達式。
4.3JavaScript 語言的 Thunk 函數
JavaScript 語言是傳值調用，它的 Thunk 函數含義有所不同。在 JavaScript 語言中，Thunk 函數替換的不是表達式，而是多參數函數，將其替換成一
個只接受回調函數作為參數的單參數函數。
上面代碼中， fs 模塊的 readFile 方法是一個多參數函數，兩個參數分別為文件名和回調函數。經過轉換器處理，它變成了一個單參數函數，只接受回調
函數作為參數。這個單參數版本，就叫做 Thunk 函數。
任何函數，只要參數有回調函數，就能寫成 Thunk 函數的形式。下面是一個簡單的 Thunk 函數轉換器。
使用上面的轉換器，生成 fs.readFile 的 Thunk 函數
var readFileThunk = Thunk(fs.readFile); readFileThunk(fileA)(callback);下面是另一個完整的例子
function f(a, cb) { cb(a); } const ft = Thunk(f); ft(1)(console.log) // 14.4Thunkify 模塊
生產環境的轉換器，建議使用 Thunkify 模塊。
首先是安裝
使用方式如下
var thunkify = require('thunkify'); var fs = require('fs'); var read = thunkify(fs.readFile); read('package.json')(function(err, str){Thunkify 的源碼與上一節那個簡單的轉換器非常像
function f(a, b, callback){ var sum = a + b; callback(sum); callback(sum); } var ft = thunkify(f); var print = console.log.bind(console); ft(1, 2)(print); // 3上面代碼中，由于 thunkify 只允許回調函數執行一次，所以只輸出一行結果
4.5Generator 函數的流程管理
你可能會問， Thunk 函數有什么用？回答是以前確實沒什么用，但是 ES6 有了 Generator 函數，Thunk 函數現在可以用于 Generator 函數的自動流
程管理。
Generator 函數可以自動執行
上面代碼中，Generator 函數 gen 會自動執行完所有步驟。
但是，這不適合異步操作。如果必須保證前一步執行完，才能執行后一步，上面的自動執行就不可行。這時，Thunk 函數就能派上用處。以讀取文件為
例。下面的 Generator 函數封裝了兩個異步操作。
上面代碼中， yield 命令用于將程序的執行權移出 Generator 函數，那么就需要一種方法，將執行權再交還給 Generator 函數。
這種方法就是 Thunk 函數，因為它可以在回調函數里，將執行權交還給 Generator 函數。為了便于理解，我們先看如何手動執行上面這個 Generator
函數
上面代碼中，變量 g 是 Generator 函數的內部指針，表示目前執行到哪一步。 next 方法負責將指針移動到下一步，并返回該步的信息（ value 屬性和
done 屬性）。
仔細查看上面的代碼，可以發現 Generator 函數的執行過程，其實是將同一個回調函數，反復傳入 next 方法的 value 屬性。這使得我們可以用遞歸來自
動完成這個過程
4.6Thunk 函數的自動流程管理
Thunk 函數真正的威力，在于可以自動執行 Generator 函數。下面就是一個基于 Thunk 函數的 Generator 執行器。
function run(fn) { var gen = fn(); function next(err, data) { var result = gen.next(data); if (result.done) return; result.value(next); } next(); } function* g() { // ... } run(g);上面代碼的 run 函數，就是一個 Generator 函數的自動執行器。內部的 next 函數就是 Thunk 的回調函數。 next 函數先將指針移到 Generator 函數的
下一步（ gen.next 方法），然后判斷 Generator 函數是否結束（ result.done 屬性），如果沒結束，就將 next 函數再傳入 Thunk 函數
（ result.value 屬性），否則就直接退出。
有了這個執行器，執行 Generator 函數方便多了。不管內部有多少個異步操作，直接把 Generator 函數傳入 run 函數即可。當然，前提是每一個異步操
作，都要是 Thunk 函數，也就是說，跟在 yield 命令后面的必須是 Thunk 函數。
上面代碼中，函數 g 封裝了 n 個異步的讀取文件操作，只要執行 run 函數，這些操作就會自動完成。這樣一來，異步操作不僅可以寫得像同步操作，而且
一行代碼就可以執行。
Thunk 函數并不是 Generator 函數自動執行的唯一方案。因為自動執行的關鍵是，必須有一種機制，自動控制 Generator 函數的流程，接收和交還程
序的執行權。回調函數可以做到這一點，Promise 對象也可以做到這一點
5. co 模塊
5.1基本用法
co 模塊是著名程序員 TJ Holowaychuk 于 2013 年 6 月發布的一個小工具，用于 Generator 函數的自動執行。
下面是一個 Generator 函數，用于依次讀取兩個文件。
co 模塊可以讓你不用編寫 Generator 函數的執行器。
var co = require('co'); co(gen);上面代碼中，Generator 函數只要傳入 co 函數，就會自動執行。
co 函數返回一個 Promise 對象，因此可以用 then 方法添加回調函數。
上面代碼中，等到 Generator 函數執行結束，就會輸出一行提示
5.2co 模塊的原理
為什么 co 可以自動執行 Generator 函數？
前面說過，Generator 就是一個異步操作的容器。它的自動執行需要一種機制，當異步操作有了結果，能夠自動交回執行權。
兩種方法可以做到這一點。
（1）回調函數。將異步操作包裝成 Thunk 函數，在回調函數里面交回執行權。
（2）Promise 對象。將異步操作包裝成 Promise 對象，用 then 方法交回執行權。
co 模塊其實就是將兩種自動執行器（Thunk 函數和 Promise 對象），包裝成一個模塊。使用 co 的前提條件是，Generator 函數的 yield 命令后面，只
能是 Thunk 函數或 Promise 對象。如果數組或對象的成員，全部都是 Promise 對象，也可以使用 co，詳見后文的例子。
介紹了基于 Thunk 函數的自動執行器。下面來看，基于 Promise 對象的自動執行器。這是理解 co 模塊必須的。
5.3基于 Promise 對象的自動執行
還是沿用上面的例子。首先，把 fs 模塊的 readFile 方法包裝成一個 Promise 對象。
var fs = require('fs'); var readFile = function (fileName){ return new Promise(function (resolve, reject){ fs.readFile(fileName, function(error, data){ if (error) return reject(error); resolve(data); }); }); }; var gen = function* (){ var f1 = yield readFile('/etc/fstab'); var f2 = yield readFile('/etc/shells'); console.log(f1.toString()); console.log(f2.toString()); };然后，手動執行上面的 Generator 函數。?
var g = gen(); g.next().value.then(function(data){ g.next(data).value.then(function(data){ g.next(data); }); });手動執行其實就是用 then 方法，層層添加回調函數。理解了這一點，就可以寫出一個自動執行器。
function run(gen){ var g = gen(); function next(data){ var result = g.next(data); if (result.done) return result.value; result.value.then(function(data){ next(data); }); } next(); } run(gen);上面代碼中，只要 Generator 函數還沒執行到最后一步， next 函數就調用自身，以此實現自動執行
5.4co 模塊的源碼
co 就是上面那個自動執行器的擴展，它的源碼只有幾十行，非常簡單。
首先，co 函數接受 Generator 函數作為參數，返回一個 Promise 對象。
在返回的 Promise 對象里面，co 先檢查參數 gen 是否為 Generator 函數。如果是，就執行該函數，得到一個內部指針對象；如果不是就返回，并將
Promise 對象的狀態改為 resolved
接著，co 將 Generator 函數的內部指針對象的 next 方法，包裝成 onFulfilled 函數。這主要是為了能夠捕捉拋出的錯誤。
function co(gen) { var ctx = this; return new Promise(function(resolve, reject) { if (typeof gen === 'function') gen = gen.call(ctx); if (!gen || typeof gen.next !== 'function') return resolve(gen); onFulfilled(); function onFulfilled(res) { var ret; try { ret = gen.next(res); } catch (e) { return reject(e); } next(ret); } }); }最后，就是關鍵的 next 函數，它會反復調用自身
function next(ret) { if (ret.done) return resolve(ret.value); var value = toPromise.call(ctx, ret.value); if (value && isPromise(value)) return value.then(onFulfilled, onRejected); return onRejected( new TypeError( 'You may only yield a function, promise, generator, array, or object, ' + 'but the following object was passed: "' + String(ret.value) + '"' ) ); }上面代碼中， next 函數的內部代碼，一共只有四行命令。
第一行，檢查當前是否為 Generator 函數的最后一步，如果是就返回。
第二行，確保每一步的返回值，是 Promise 對象。
第三行，使用 then 方法，為返回值加上回調函數，然后通過 onFulfilled 函數再次調用 next 函數。
第四行，在參數不符合要求的情況下（參數非 Thunk 函數和 Promise 對象），將 Promise 對象的狀態改為 rejected ，從而終止執行
5.5處理并發的異步操作
co 支持并發的異步操作，即允許某些操作同時進行，等到它們全部完成，才進行下一步。
這時，要把并發的操作都放在數組或對象里面，跟在 yield 語句后面。
下面是另一個例子。
co(function* () { var values = [n1, n2, n3]; yield values.map(somethingAsync); }); function* somethingAsync(x) { // do something async return y }上面的代碼允許并發三個 somethingAsync 異步操作，等到它們全部完成，才會進行下一步
5.6實例：處理 Stream
Node 提供 Stream 模式讀寫數據，特點是一次只處理數據的一部分，數據分成一塊塊依次處理，就好像“數據流”一樣。這對于處理大規模數據非常有
利。Stream 模式使用 EventEmitter API，會釋放三個事件
data 事件：下一塊數據塊已經準備好了。
end 事件：整個“數據流”處理“完了。
error 事件：發生錯誤。
使用 Promise.race() 函數，可以判斷這三個事件之中哪一個最先發生，只有當 data 事件最先發生時，才進入下一個數據塊的處理。從而，我們可以通過
一個 while 循環，完成所有數據的讀取。
對于每個數據塊都使用 stream.once 方法，在 data 、 end 、 error 三個事件上添加一次性回
調函數。變量 res 只有在 data 事件發生時才有值，然后累加每個數據塊之中 valjean 這個詞出現的次數。
總結
本博客源于本人閱讀相關書籍和視頻總結，創作不易，謝謝點贊支持。學到就是賺到。我是歌謠，勵志成為一名優秀的技術革新人員。
歡迎私信交流，一起學習，一起成長。
推薦鏈接 其他文件目錄參照
“睡服“面試官系列之各系列目錄匯總（建議學習收藏）
????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????
總結
以上是生活随笔為你收集整理的“睡服”面试官系列第二十篇之generator函数的异步应用（建议收藏学习）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 什么是RIA 技术？
- 下一篇： blogspot博客搬家