摘要：否則不會(huì)得到異步之后的值對(duì)象的值，并沒(méi)有在中進(jìn)行處理，而是直接作為返回值返回到對(duì)象外面了這就是的魔法。當(dāng)生成器函數(shù)內(nèi)的邏輯執(zhí)行完畢且沒(méi)有錯(cuò)誤之后，這個(gè)對(duì)象返回值變?yōu)闋顟B(tài)，且將生成器的返回值作為出來(lái)的值。

之前我在關(guān)于Promise的文章中提到了co這個(gè)庫(kù)。在這篇文章里，我將寫(xiě)一寫(xiě)自己對(duì)它的認(rèn)識(shí)。

Trust me，用了co庫(kù)，你不想用別的，來(lái)它半斤異步調(diào)用你一口能吃仨。

但是我對(duì)Tj大神的co庫(kù)源碼談不上深入理解。所以，如有亂講，歡迎指正。

我這里默認(rèn)讀者對(duì)Promise和Generator有一定的認(rèn)識(shí)。

先安利自己寫(xiě)的兩篇關(guān)于Promise的文章：

淺析ES6原生Promise

再談Promise

下面我就來(lái)談?wù)?b>co這個(gè)牛逼的庫(kù)。

干嘛，我們不是講ES6么，怎么跳到ES7了？

因?yàn)?b>co要做的事情，就是ES7的async/await要做的事情。
也就是說(shuō)，這種解決異步的思路，已經(jīng)在ECMA標(biāo)準(zhǔn)的考慮之中了。將來(lái)我們?yōu)g覽器的JS引擎就可以原生實(shí)現(xiàn)這件事而不是通過(guò)JavaScript代碼模擬。要知道，引擎的實(shí)現(xiàn)和代碼的實(shí)現(xiàn)那是完全兩碼事。

多一句嘴：有些同學(xué)混淆了ECMA標(biāo)準(zhǔn)、引擎支持和代碼實(shí)現(xiàn)的聯(lián)系。

這里引用老趙在知乎里面回答問(wèn)題時(shí)說(shuō)的一句話(huà)：

ES7是個(gè)標(biāo)準(zhǔn)，定義的是what to do不是how to do，為什么好多人還是搞不清這兩者的區(qū)別。

ECMAScript定義了一些JavaScript語(yǔ)言層面要做的事情，這是一個(gè)標(biāo)準(zhǔn)。之所以要制定這個(gè)標(biāo)準(zhǔn)，是為了防止瀏覽器各自為政而出現(xiàn)JS引擎對(duì)同一行代碼的解釋出現(xiàn)不同的情況。

也就是說(shuō)，ECMA制定標(biāo)準(zhǔn)，我們就可以按照這個(gè)標(biāo)準(zhǔn)來(lái)寫(xiě)JavaScript代碼。寫(xiě)好的JavaScript代碼由瀏覽器的JS引擎來(lái)解釋?zhuān)罱K變成計(jì)算機(jī)能讀懂的代碼來(lái)執(zhí)行。

上代碼：

var foo = function(){

    return new Promise(resolve => {
        // 異步操作之后
        resolve("OK");
    });
}

async funtion bar(){
    
    var result = await foo();
    
    console.log(result); 
    
}

bar(); // ==> 打印"OK"

我們注意到，這段代碼用了兩個(gè)新的關(guān)鍵字async和await。而且有兩件神奇的事情發(fā)生了：

bar函數(shù)中包含了一個(gè)返回Promise對(duì)象的語(yǔ)句，而且Promise中存在異步代碼。但是這條語(yǔ)句接下來(lái)的語(yǔ)句明顯是等待Promise對(duì)象中的代碼異步執(zhí)行完畢之后才執(zhí)行的。（否則不會(huì)得到異步之后的值）

Promise對(duì)象resolve的值，并沒(méi)有在then中進(jìn)行處理，而是直接作為返回值返回到Promise對(duì)象外面了.

這就是async/await的魔法。在函數(shù)前面加上async關(guān)鍵字之后，內(nèi)部的代碼會(huì)識(shí)別await關(guān)鍵字。此時(shí)假設(shè)await后面的語(yǔ)句返回一個(gè)Promise對(duì)象，那么執(zhí)行的代碼將會(huì)等待，直到Promise對(duì)象變?yōu)?b>resolve狀態(tài)。并且Promise對(duì)象中resolve的值將直接作為await語(yǔ)句的返回值返回。然后再執(zhí)行await語(yǔ)句之后的語(yǔ)句。

從此我們就可以無(wú)痛的擼異步代碼，媽媽再也不用擔(dān)心回調(diào)金字塔的出現(xiàn)和異步流程邏輯搞不定的情況了！

另一個(gè)奇妙的事情就是，率先支持這一特性的瀏覽器居然是微軟的Edge。大概是因?yàn)?b>C#語(yǔ)言早就出現(xiàn)async/await,并且TypeScript也支持這一特性的緣故吧。

我們希望所有的瀏覽器都及早支持這一特性。但是值得欣喜的一點(diǎn)就是，雖然V8還沒(méi)有支持，Tj大神早就利用Generator的方式實(shí)現(xiàn)了一個(gè)ES6版本的async/await！（膜拜臉）

同樣是上面的邏輯，我們用co實(shí)現(xiàn)一次：

// 首先我們需要將co引入，假設(shè)我們使用commonJS的方式  

const co = require("co");

var foo = function(){

    return new Promise(resolve => {
        // 異步操作之后
        resolve("OK");
    });
}

co(function* (){
    
    var result = yield foo();
    
    console.log(result); 
    
}); // ==> 打印"OK"

我們看到，co函數(shù)接收一個(gè)Generator生成器函數(shù)作為參數(shù)。執(zhí)行co函數(shù)的時(shí)候，生成器函數(shù)內(nèi)部的邏輯像async函數(shù)調(diào)用時(shí)一樣被執(zhí)行。不同之處只是這里的await變成了yield。

要實(shí)現(xiàn)以上的邏輯，結(jié)合Generator的特性，co函數(shù)應(yīng)該：

在函數(shù)體內(nèi)將Generator生成器函數(shù)執(zhí)行并生成生成器實(shí)例(在此命名為gen)，然后通過(guò)gen.next方法的調(diào)用，不斷執(zhí)行生成器函數(shù)內(nèi)部的代碼。

執(zhí)行next方法之后，返回的Promise在生成器函數(shù)執(zhí)行環(huán)境之外執(zhí)行，并取出resolve值，作為返回值作為next方法的參數(shù)返回到Generator執(zhí)行環(huán)境中。

基于以上兩點(diǎn)，我們可以大體實(shí)現(xiàn)一個(gè)簡(jiǎn)化版的co，代碼如下：

const co = function(genFunc){  
    const gen = genFunc(); // 得到生成器實(shí)例  
    
    const deal = (val) => {
        
        const res = gen.next(val); 
        
        // 這里處理了異步邏輯，
        // 在回調(diào)中去遞歸，不斷執(zhí)行next
        // 這樣就將resolve的值傳回了Generator
        res.value.then(result => deal(result));
        
    }
    
    deal(); // 第一次觸發(fā)遞歸
}

去掉括號(hào)等等，只有短短六行代碼。

原理性的東西大約就是這樣了。但是co做的不止這些。

之前co的yield后的語(yǔ)句并不支持Promise對(duì)象，而是一個(gè)特殊的函數(shù)，叫做thunk。目前co二者都支持。
此處我并不打算重復(fù)性解釋thunk版本，因?yàn)樵硇缘臇|西實(shí)現(xiàn)起來(lái)是差不多的。

co函數(shù)是有返回值的，也是一個(gè)Promise對(duì)象。

當(dāng)生成器函數(shù)內(nèi)的邏輯執(zhí)行完畢且沒(méi)有錯(cuò)誤之后，這個(gè)Promise對(duì)象（co返回值）變?yōu)?b>resolve狀態(tài)，且將生成器的返回值作為resolve出來(lái)的值。

若生成器函數(shù)內(nèi)返回一個(gè)Promise對(duì)象，那么co函數(shù)返回值就是這個(gè)Promise對(duì)象。

若生成器函數(shù)拋出了錯(cuò)誤，那么這個(gè)錯(cuò)誤作為reject出來(lái)的值，將Promise對(duì)象的狀態(tài)變?yōu)?b>reject。

這樣我們就可以將錯(cuò)誤放進(jìn)其返回值的.catch方法中統(tǒng)一處理。

在生成器函數(shù)內(nèi)部，我們也可以使用try...catch語(yǔ)句獲取錯(cuò)誤對(duì)象。

生成器的yield后面可以跟一個(gè)元素值為Promise對(duì)象的數(shù)組，這個(gè)數(shù)組內(nèi)Promise對(duì)象內(nèi)的異步邏輯將并發(fā)執(zhí)行，并返回一個(gè)數(shù)組。（類(lèi)似于Promise.all方法）

假設(shè)生成器執(zhí)行之前需要從外部傳入?yún)?shù)，co庫(kù)提供了一個(gè)方法：

  var fn = co.wrap(function* (val) {
  
     return yield Promise.resolve(val);

  });

  fn(true).then(function (val) {

  });

以上是一點(diǎn)微小的見(jiàn)解。謝謝指正。