ECMAScript 6(簡(jiǎn)稱ES6)將 JavaScript 異步編程帶入了一個(gè)全新的階段。這篇文章的主題，就是介紹更強(qiáng)大、更完善的 ES6 異步編程方法。

首先我們回顧一下javascript異步的發(fā)展歷程。

ES6 以前：

回調(diào)函數(shù)(callback)：nodejs express 中常用，ajax中常用。

ES6：

promise對(duì)象：nodejs最早有bluebird promise的雛形，axios中常用。

generator函數(shù)：nodejs koa框架使用率很高。

ES7:

async/await語(yǔ)法：當(dāng)前最常用的異步語(yǔ)法，nodejs koa2 完全使用該語(yǔ)法。

什么是異步

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

異步

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

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

同步

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

回調(diào)函數(shù)callback

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

回調(diào)字面也好理解，就是先處理本體函數(shù)，再處理回調(diào)的函數(shù)，舉個(gè)例子，方便大家理解。

上面的例子很好理解，首先執(zhí)行主體函數(shù)A，打印結(jié)果：我是主題函數(shù);

然后執(zhí)行回調(diào)函數(shù)callback 也就是B，打印結(jié)果：我是回調(diào)函數(shù)。

promise對(duì)象

promise 對(duì)象用于一個(gè)異步操作的最終完成(或最終失敗)及其結(jié)果的表示。

簡(jiǎn)單地說(shuō)就是處理一個(gè)異步請(qǐng)求。我們經(jīng)常會(huì)做些斷言，如果我贏了你就嫁給我，如果輸了我就嫁給你之類的斷言。

這就是promise的中文含義：斷言，一個(gè)成功，一個(gè)失敗。

舉個(gè)例子，方便大家理解：

promise構(gòu)造函數(shù)的參數(shù)是一個(gè)函數(shù)，我們把它稱為處理器函數(shù)。

處理器函數(shù)接收兩個(gè)函數(shù)reslove和reject作為其參數(shù)，當(dāng)異步操作順利執(zhí)行則執(zhí)行reslove函數(shù), 當(dāng)異步操作中發(fā)生異常時(shí)，則執(zhí)行reject函數(shù)。

通過(guò)resolve傳入得的值，可以在then方法中獲取到，通過(guò)reject傳入的值可以在chatch方法中獲取到。

因?yàn)閠hen和catch都返回一個(gè)相同的promise對(duì)象，所以可以進(jìn)行鏈?zhǔn)秸{(diào)用。

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

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

那么，有沒(méi)有更好的寫法呢?

協(xié)程

傳統(tǒng)的編程語(yǔ)言，早有異步編程的解決方案(其實(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)樗殖蓛啥?或多段)執(zhí)行。

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

function?asnycJob()?{?

//?...其他代碼?

var?f?=?yield?readFile(fileA);?

//?...其他代碼?

}?

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

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

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ù)名之前要加星號(hào)，以示區(qū)別。

整個(gè) Generator 函數(shù)就是一個(gè)封裝的異步任務(wù)，或者說(shuō)是異步任務(wù)的容器。異步操作需要暫停的地方，都用 yield 語(yǔ)句注明。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é)果，返回的是指針對(duì)象。調(diào)用指針 g 的 next 方法，會(huì)移動(dòng)內(nèi)部指針(即執(zhí)行異步任務(wù)的第一段)，指向第一個(gè)遇到的 yield 語(yǔ)句，上例是執(zhí)行到 x + 2 為止。

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

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ù)解析信息。就像前面說(shuō)過(guò)的，這段代碼非常像同步操作，除了加上了 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ù)，獲取遍歷器對(duì)象，然后使用 next 方法(第二行)，執(zhí)行異步任務(wù)的第一階段。由于 Fetch 模塊返回的是一個(gè) Promise 對(duì)象，因此要用 then 方法調(diào)用下一個(gè)next 方法。

可以看到，雖然 Generator 函數(shù)將異步操作表示得很簡(jiǎn)潔，但是流程管理卻不方便(即何時(shí)執(zhí)行第一階段、何時(shí)執(zhí)行第二階段)。

async-await

async函數(shù)返回一個(gè)promise對(duì)象，如果在async函數(shù)中返回一個(gè)直接量，async會(huì)通過(guò)Promise.resolve封裝成Promise對(duì)象。

我們可以通過(guò)調(diào)用promise對(duì)象的then方法，獲取這個(gè)直接量。

那如過(guò)async函數(shù)不返回值，又會(huì)是怎么樣呢?

await會(huì)暫停當(dāng)前async的執(zhí)行，await會(huì)阻塞代碼的執(zhí)行，直到await后的表達(dá)式處理完成，代碼才能繼續(xù)往下執(zhí)行。

await后的表達(dá)式既可以是一個(gè)Promise對(duì)象，也可以是任何要等待的值。

如果await等到的是一個(gè) Promise 對(duì)象，await 就忙起來(lái)了，它會(huì)阻塞后面的代碼，等著 Promise 對(duì)象 resolve，然后得到 resolve 的值，作為 await 表達(dá)式的運(yùn)算結(jié)果。

上邊你看到阻塞一詞，不要驚慌，async/await只是一種語(yǔ)法糖，代碼執(zhí)行與多個(gè)callback嵌套調(diào)用沒(méi)有區(qū)別。

本質(zhì)并不是同步代碼，它只是讓你思考代碼邏輯的時(shí)候能夠以同步的思維去思考，避開回調(diào)地獄。

簡(jiǎn)而言之-async/await是以同步的思維去寫異步的代碼，所以async/await并不會(huì)影響node的并發(fā)數(shù)，大家可以大膽的應(yīng)用到項(xiàng)目中去!

如果它等到的不是一個(gè) Promise 對(duì)象，那 await 表達(dá)式的運(yùn)算結(jié)果就是它等到的東西。

舉個(gè)例子，方便大家理解：