異步編程對 JavaScript 語言太重要。JavaScript 只有一根線程，如果沒有異步編程，根本沒法用，非卡死不可。

以前，異步編程的方法，大概有下面四種。

• 回調(diào)函數(shù)
• 事件監(jiān)聽
• 發(fā)布/訂閱
• Promise 對象

ECMAScript 6 （簡稱 ES6 ）作為下一代 JavaScript 語言，將 JavaScript 異步編程帶入了一個(gè)全新的階段。這組系列文章的主題，就是介紹更強(qiáng)大、更完善的 ES6 異步編程方法。

新方法比較抽象，初學(xué)時(shí)，我常常感到費(fèi)解，直到很久以后才想通，異步編程的語法目標(biāo)，就是怎樣讓它更像同步編程。這組系列文章，將幫助你深入理解 JavaScript 異步編程的本質(zhì)。所有將要講到的內(nèi)容，都已經(jīng)實(shí)現(xiàn)了。也就是說，馬上就能用，套用一句廣告語，就是"未來已來"。

一、什么是異步？

所謂"異步"，簡單說就是一個(gè)任務(wù)分成兩段，先執(zhí)行第一段，然后轉(zhuǎn)而執(zhí)行其他任務(wù)，等做好了準(zhǔn)備，再回過頭執(zhí)行第二段。比如，有一個(gè)任務(wù)是讀取文件進(jìn)行處理，異步的執(zhí)行過程就是下面這樣。

上圖中，任務(wù)的第一段是向操作系統(tǒng)發(fā)出請求，要求讀取文件。然后，程序執(zhí)行其他任務(wù)，等到操作系統(tǒng)返回文件，再接著執(zhí)行任務(wù)的第二段（處理文件）。

這種不連續(xù)的執(zhí)行，就叫做異步。相應(yīng)地，連續(xù)的執(zhí)行，就叫做同步。

上圖就是同步的執(zhí)行方式。由于是連續(xù)執(zhí)行，不能插入其他任務(wù)，所以操作系統(tǒng)從硬盤讀取文件的這段時(shí)間，程序只能干等著。

二、回調(diào)函數(shù)的概念

JavaScript 語言對異步編程的實(shí)現(xiàn)，就是回調(diào)函數(shù)。所謂回調(diào)函數(shù)，就是把任務(wù)的第二段單獨(dú)寫在一個(gè)函數(shù)里面，等到重新執(zhí)行這個(gè)任務(wù)的時(shí)候，就直接調(diào)用這個(gè)函數(shù)。它的英語名字 callback，直譯過來就是"重新調(diào)用"。

讀取文件進(jìn)行處理，是這樣寫的。

fs.readFile('/etc/passwd', function (err, data) {if (err) throw err;console.log(data); });

上面代碼中，readFile 函數(shù)的第二個(gè)參數(shù)，就是回調(diào)函數(shù)，也就是任務(wù)的第二段。等到操作系統(tǒng)返回了 /etc/passwd 這個(gè)文件以后，回調(diào)函數(shù)才會(huì)執(zhí)行。

一個(gè)有趣的問題是，為什么 Node.js 約定，回調(diào)函數(shù)的第一個(gè)參數(shù)，必須是錯(cuò)誤對象err（如果沒有錯(cuò)誤，該參數(shù)就是 null）？原因是執(zhí)行分成兩段，在這兩段之間拋出的錯(cuò)誤，程序無法捕捉，只能當(dāng)作參數(shù)，傳入第二段。

三、Promise

回調(diào)函數(shù)本身并沒有問題，它的問題出現(xiàn)在多個(gè)回調(diào)函數(shù)嵌套。假定讀取A文件之后，再讀取B文件，代碼如下。

fs.readFile(fileA, function (err, data) {fs.readFile(fileB, function (err, data) {// ...}); });

不難想象，如果依次讀取多個(gè)文件，就會(huì)出現(xiàn)多重嵌套。代碼不是縱向發(fā)展，而是橫向發(fā)展，很快就會(huì)亂成一團(tuán)，無法管理。這種情況就稱為"回調(diào)函數(shù)噩夢"（callback hell）。

Promise就是為了解決這個(gè)問題而提出的。它不是新的語法功能，而是一種新的寫法，允許將回調(diào)函數(shù)的橫向加載，改成縱向加載。采用Promise，連續(xù)讀取多個(gè)文件，寫法如下。

var readFile = require('fs-readfile-promise');readFile(fileA) .then(function(data){console.log(data.toString()); }) .then(function(){return readFile(fileB); }) .then(function(data){console.log(data.toString()); }) .catch(function(err) {console.log(err); });

上面代碼中，我使用了?fs-readfile-promise?模塊，它的作用就是返回一個(gè) Promise 版本的 readFile 函數(shù)。Promise 提供 then 方法加載回調(diào)函數(shù)，catch方法捕捉執(zhí)行過程中拋出的錯(cuò)誤。

可以看到，Promise 的寫法只是回調(diào)函數(shù)的改進(jìn)，使用then方法以后，異步任務(wù)的兩段執(zhí)行看得更清楚了，除此以外，并無新意。

Promise 的最大問題是代碼冗余，原來的任務(wù)被Promise 包裝了一下，不管什么操作，一眼看去都是一堆 then，原來的語義變得很不清楚。

那么，有沒有更好的寫法呢？

四、協(xié)程

傳統(tǒng)的編程語言，早有異步編程的解決方案（其實(shí)是多任務(wù)的解決方案）。其中有一種叫做"協(xié)程"（coroutine），意思是多個(gè)線程互相協(xié)作，完成異步任務(wù)。

協(xié)程有點(diǎn)像函數(shù)，又有點(diǎn)像線程。它的運(yùn)行流程大致如下。

第一步，協(xié)程A開始執(zhí)行。

第二步，協(xié)程A執(zhí)行到一半，進(jìn)入暫停，執(zhí)行權(quán)轉(zhuǎn)移到協(xié)程B。

第三步，（一段時(shí)間后）協(xié)程B交還執(zhí)行權(quán)。

第四步，協(xié)程A恢復(fù)執(zhí)行。

上面流程的協(xié)程A，就是異步任務(wù)，因?yàn)樗殖蓛啥?#xff08;或多段）執(zhí)行。

舉例來說，讀取文件的協(xié)程寫法如下。

function asnycJob() {// ...其他代碼var f = yield readFile(fileA);// ...其他代碼 }

上面代碼的函數(shù) asyncJob 是一個(gè)協(xié)程，它的奧妙就在其中的 yield 命令。它表示執(zhí)行到此處，執(zhí)行權(quán)將交給其他協(xié)程。也就是說，yield命令是異步兩個(gè)階段的分界線。

協(xié)程遇到 yield 命令就暫停，等到執(zhí)行權(quán)返回，再從暫停的地方繼續(xù)往后執(zhí)行。它的最大優(yōu)點(diǎn)，就是代碼的寫法非常像同步操作，如果去除yield命令，簡直一模一樣。

五、Generator函數(shù)的概念

Generator 函數(shù)是協(xié)程在 ES6 的實(shí)現(xiàn)，最大特點(diǎn)就是可以交出函數(shù)的執(zhí)行權(quán)（即暫停執(zhí)行）。

function* gen(x){var y = yield x + 2;return y; }

上面代碼就是一個(gè) Generator 函數(shù)。它不同于普通函數(shù)，是可以暫停執(zhí)行的，所以函數(shù)名之前要加星號，以示區(qū)別。

整個(gè) Generator 函數(shù)就是一個(gè)封裝的異步任務(wù)，或者說是異步任務(wù)的容器。異步操作需要暫停的地方，都用 yield 語句注明。Generator 函數(shù)的執(zhí)行方法如下。

var g = gen(1); g.next() // { value: 3, done: false } g.next() // { value: undefined, done: true }

上面代碼中，調(diào)用 Generator 函數(shù)，會(huì)返回一個(gè)內(nèi)部指針（即遍歷器?）g 。這是 Generator 函數(shù)不同于普通函數(shù)的另一個(gè)地方，即執(zhí)行它不會(huì)返回結(jié)果，返回的是指針對象。調(diào)用指針 g 的 next 方法，會(huì)移動(dòng)內(nèi)部指針（即執(zhí)行異步任務(wù)的第一段），指向第一個(gè)遇到的 yield 語句，上例是執(zhí)行到 x + 2 為止。

換言之，next 方法的作用是分階段執(zhí)行 Generator 函數(shù)。每次調(diào)用 next 方法，會(huì)返回一個(gè)對象，表示當(dāng)前階段的信息（ value 屬性和 done 屬性）。value 屬性是 yield 語句后面表達(dá)式的值，表示當(dāng)前階段的值；done 屬性是一個(gè)布爾值，表示 Generator 函數(shù)是否執(zhí)行完畢，即是否還有下一個(gè)階段。

六、Generator 函數(shù)的數(shù)據(jù)交換和錯(cuò)誤處理

Generator 函數(shù)可以暫停執(zhí)行和恢復(fù)執(zhí)行，這是它能封裝異步任務(wù)的根本原因。除此之外，它還有兩個(gè)特性，使它可以作為異步編程的完整解決方案：函數(shù)體內(nèi)外的數(shù)據(jù)交換和錯(cuò)誤處理機(jī)制。

next 方法返回值的 value 屬性，是 Generator 函數(shù)向外輸出數(shù)據(jù)；next 方法還可以接受參數(shù)，這是向 Generator 函數(shù)體內(nèi)輸入數(shù)據(jù)。

function* gen(x){var y = yield x + 2;return y; }var g = gen(1); g.next() // { value: 3, done: false } g.next(2) // { value: 2, done: true }

上面代碼中，第一個(gè) next 方法的 value 屬性，返回表達(dá)式 x + 2 的值（3）。第二個(gè) next 方法帶有參數(shù)2，這個(gè)參數(shù)可以傳入 Generator 函數(shù)，作為上個(gè)階段異步任務(wù)的返回結(jié)果，被函數(shù)體內(nèi)的變量 y 接收。因此，這一步的 value 屬性，返回的就是2（變量 y 的值）。

Generator 函數(shù)內(nèi)部還可以部署錯(cuò)誤處理代碼，捕獲函數(shù)體外拋出的錯(cuò)誤。

function* gen(x){try {var y = yield x + 2;} catch (e){ console.log(e);}return y; }var g = gen(1); g.next(); g.throw（'出錯(cuò)了'）; // 出錯(cuò)了

上面代碼的最后一行，Generator 函數(shù)體外，使用指針對象的 throw 方法拋出的錯(cuò)誤，可以被函數(shù)體內(nèi)的 try ... catch 代碼塊捕獲。這意味著，出錯(cuò)的代碼與處理錯(cuò)誤的代碼，實(shí)現(xiàn)了時(shí)間和空間上的分離，這對于異步編程無疑是很重要的。

七、Generator 函數(shù)的用法

下面看看如何使用 Generator 函數(shù)，執(zhí)行一個(gè)真實(shí)的異步任務(wù)。

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 函數(shù)封裝了一個(gè)異步操作，該操作先讀取一個(gè)遠(yuǎn)程接口，然后從 JSON 格式的數(shù)據(jù)解析信息。就像前面說過的，這段代碼非常像同步操作，除了加上了 yield 命令。

執(zhí)行這段代碼的方法如下。

var g = gen(); var result = g.next();result.value.then(function(data){return data.json(); }).then(function(data){g.next(data); });

上面代碼中，首先執(zhí)行 Generator 函數(shù)，獲取遍歷器對象，然后使用 next 方法（第二行），執(zhí)行異步任務(wù)的第一階段。由于?Fetch 模塊返回的是一個(gè) Promise 對象，因此要用 then 方法調(diào)用下一個(gè)next 方法。

可以看到，雖然 Generator 函數(shù)將異步操作表示得很簡潔，但是流程管理卻不方便（即何時(shí)執(zhí)行第一階段、何時(shí)執(zhí)行第二階段）。本系列的后面部分，就將介紹如何自動(dòng)化異步任務(wù)的流程管理。另外，本文對 Generator 函數(shù)的介紹很簡單，詳盡的教程請閱讀我寫的《ECMAScript 6入門》。

總結(jié)

以上是生活随笔為你收集整理的Generator 函数的含义与用法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。