摘要：調(diào)用方法執(zhí)行到后暫停，內(nèi)部環(huán)境被保存，執(zhí)行返回一個(gè)對(duì)象，為的執(zhí)行結(jié)果，表示迭代器是否完成。當(dāng)?shù)魍瓿珊?，為，為的值，繼續(xù)執(zhí)行，將為執(zhí)行原理回到開(kāi)頭的例子，給我們提供了直觀的寫(xiě)法來(lái)處理異步回調(diào)，它讓代碼邏輯非常清晰。

編者按：看完本文，你能對(duì)ES6的Generator有一個(gè)很好的理解，輕松地以同步的方式寫(xiě)異步代碼，也能初步理解到TJ大神的co框架的原理。

前言：ES6在2015年6月正式發(fā)布，它帶給js帶來(lái)許多新特性，其中一個(gè)就是Generator，雖然其它語(yǔ)言如python早就有了，但js的Generator和它們的還是有點(diǎn)不一樣的，js的Generator重點(diǎn)在解決異步回調(diào)金字塔問(wèn)題，巧妙的使用它可以寫(xiě)出看起來(lái)同步的代碼。

我們都知道js跟其它語(yǔ)言相比，最大的特性就是異步，所以當(dāng)我們要取異步取一個(gè)文件內(nèi)容時(shí)，一般我們會(huì)這樣寫(xiě)

$.get("http://youzan.com/test.txt", function(data){
    console.log(data);
})

如果取完A文件后又要再取B文件：

$.get("http://youzan.com/A.txt", function(a){
    $.get("http://youzan.com/B.txt", function(b){
        console.log(b);
    }
}

再取一個(gè)C文件可能這樣寫(xiě)：

$.get("http://youzan.com/A.txt", function(a){
    $.get("http://youzan.com/B.txt", function(b){
        $.get("http://youzan.com/C.txt", function(c){
            console.log(c);
        }
    }
}

當(dāng)有更多的異步操作，業(yè)務(wù)邏輯更為的復(fù)雜時(shí)，按上面的寫(xiě)法維護(hù)時(shí)心中肯定要罵娘了。那有沒(méi)有更好一點(diǎn)的寫(xiě)法呢？在Generator出來(lái)之前可以使用promise實(shí)現(xiàn)，雖然說(shuō)promise也是es6的一部分，es6標(biāo)準(zhǔn)未出之前已經(jīng)有很多ployfill出來(lái)了。

$.get("http://youzan.com/A.txt")
    .done(function(a){
        return $.get("http://youzan.com/B.txt");
    })
    .done(function(b){
        return $.get("http://youzan.com/C.txt");
    })
    .done(function(c){
        console.log(c);
    })

promise的實(shí)現(xiàn)要比上面嵌套回調(diào)要優(yōu)雅許多，但也可以一眼看出異步回調(diào)的身影。目前js有很多框架要致力解決js金字塔回調(diào)，讓異步代碼書(shū)寫(xiě)的邏輯更為清晰，如async, wind.js, promise, deffer。這些框架都有自己的一些約定，如async是以數(shù)組形式來(lái)寫(xiě)，promise是以回調(diào)參數(shù)方式，但它們都不能做到像寫(xiě)c或java那樣第一行open一個(gè)file，然后第二行馬上讀取，來(lái)看看最新的Generator是怎么做的：

co(function* (){
    var a = yield $.get("http://youzan.com/A.txt");
    var b = yield $.get("http://youzan.com/B.txt");
    var c = yield $.get("http://youzan.com/C.txt");
    console.log(c);
})

上面代碼使用了co框架包裹，里面一個(gè)Generator，從書(shū)寫(xiě)上看它已經(jīng)和其它同步語(yǔ)言差不多。寫(xiě)了多年的異步看到上面代碼是不是感覺(jué)不可思義呢？這就是Generator帶來(lái)的可喜之處，其實(shí)es6還更多的新東西等著你發(fā)現(xiàn)。下面來(lái)了詳細(xì)了解一下Generator。

Generator是生成器的意思，它是一種可以從中退出并在之后重新進(jìn)入的函數(shù)。生成器的環(huán)境（綁定的變量）會(huì)在每次執(zhí)行后被保存，下次進(jìn)入時(shí)可繼續(xù)使用。生成器其實(shí)在其它語(yǔ)言很早就有了，比如python、c#，但與python不同的是js的generator更多的是提供一種異步解決方案。

Generator使用function*來(lái)定義，內(nèi)部有yield關(guān)鍵字，next方法控制內(nèi)部執(zhí)行流程，每執(zhí)行到一個(gè)yield語(yǔ)句就會(huì)中斷，并返回一個(gè)迭代值，下次執(zhí)行時(shí)從yield的下一個(gè)語(yǔ)句繼續(xù)執(zhí)行。一個(gè)生成器只能執(zhí)行一次。

一個(gè)簡(jiǎn)單的定義如下：

function* hello() {
   var a = "b"
   yield "a";
   return a;
}

var gen = hello();
console.log(gen);
// => hello {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: undefined}
console.log(gen.next())
// => {value: "a", done: false}
console.log(gen.next())
// => {value: "b", done: true}

上面代碼通過(guò)調(diào)用hello()，產(chǎn)生了一個(gè)生成器，內(nèi)部代碼沒(méi)有執(zhí)行。調(diào)用next方法執(zhí)行到yield后暫停，內(nèi)部環(huán)境被保存，next執(zhí)行返回一個(gè)對(duì)象，value為yield的執(zhí)行結(jié)果，done表示迭代器是否完成。當(dāng)?shù)魍瓿珊螅?b>done為true，value為return的值，繼續(xù)執(zhí)行next，value將為undefined

回到開(kāi)頭的例子，Generator給我們提供了直觀的寫(xiě)法來(lái)處理異步回調(diào)，它讓代碼邏輯非常清晰。來(lái)了解一下Generator內(nèi)部的一些原理

function* hello() {
   yield "a";
   return "b";
}
var gen = hello();
console.log(gen);
// => hello {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: undefined}

使用chrome工具查看對(duì)象內(nèi)容，可發(fā)現(xiàn)里面有next和throw方法。

當(dāng)我們執(zhí)行next方法時(shí)，發(fā)現(xiàn)其返回了一個(gè)對(duì)象：

對(duì)象含有value和done兩個(gè)字段，value為yield "a"的返回值，即為"a"，done表示generator的狀態(tài)，為true時(shí)表示執(zhí)行完成。再執(zhí)行next方法時(shí)，可以看到done的值已經(jīng)為true了，而且value的值為return的值。

查看gen自身內(nèi)部的狀態(tài)，可以看到GeneratorStatus已經(jīng)為closed了

綜上可以得出Generator是通過(guò)調(diào)用next方法來(lái)控制執(zhí)行流程，當(dāng)遇到y(tǒng)ield語(yǔ)句時(shí)暫停執(zhí)行。next方法返回一個(gè)對(duì)像{value: "yield", done: false}，value存儲(chǔ)的yield 執(zhí)行結(jié)果，done表示迭代器是否執(zhí)行完成。

通過(guò)上面的了解貌似generator并沒(méi)有太大卵用，不能如所說(shuō)的用同步情懷書(shū)寫(xiě)異步代碼。上面漏了很重要的一點(diǎn)就是yield的返回值及next的參數(shù)?？聪旅嬉欢未a：

function* hello() {
  var ret = yield "a";
  console.log(ret);
}

然后過(guò)程如下一下：

從上面執(zhí)行過(guò)程可以看到，ret與第二個(gè)next的參數(shù)值一樣，這是Generator的傳值方式。yield的返回值就是next的參數(shù)，第一個(gè)next由于執(zhí)行到y(tǒng)ield語(yǔ)句之前就暫停了，所以參數(shù)b沒(méi)有用。

這里也提一下上面出現(xiàn)的throw方法。

在generator中使用gen.throw("error")來(lái)拋出異常。當(dāng)出現(xiàn)異常后，迭代中止，再次執(zhí)行g(shù)en.next()時(shí)，將返回{value: undefined, done: true};

使用try catch可捕獲gen.throw出來(lái)的異常。

至此對(duì)generator了解的也差不多了，但貌似使用它來(lái)寫(xiě)代碼感覺(jué)挺變扭的，因?yàn)槟阋煌５膎ext，如果有一個(gè)函數(shù)能自動(dòng)執(zhí)行g(shù)enerator函數(shù)就好了。就像之前提到的代碼：

co(function* (){
    var a = yield $.get("http://youzan.com/A.txt");
    var b = yield $.get("http://youzan.com/B.txt");
    var c = yield $.get("http://youzan.com/C.txt");
    console.log(c);
})

上面提到的Generator內(nèi)部原理可以總結(jié)出，right這邊執(zhí)行后的結(jié)果放到value里，next的參數(shù)放到了left這邊。為了讓right這邊執(zhí)行后的結(jié)果放到left，那right就得返回一個(gè)function，傳一個(gè)callback進(jìn)行，然后在callback里執(zhí)行next方法。通過(guò)了角Generator的數(shù)據(jù)傳遞過(guò)程就可以寫(xiě)出一個(gè)簡(jiǎn)易版的co來(lái)自動(dòng)執(zhí)行next方法，以達(dá)到上面代碼效果：

function co(genFunc) {
  var gen = genFunc();

  var next = function(value){
     var ret = gen.next(value);
     if (!ret.done) {
       ret.value(next);
     }
  }

  next();
}

function getAFromServer(url){
    /*
     *do something sync
     */
    return function(cb) {
       /*
        *do something async
        */ 
       var a = "data A from server";
       cb(a);    // 返回讀到的內(nèi)容
    }
}

function getBFromServer(url){
    /*
     *do something sync
     */
    return function(cb) {
       /*
        *do something async
        */ 
       var b = "data B from server";
       cb(b);    // 返回讀到的內(nèi)容
    }
}

co(function* (){
  var ret = yield getFromSever("url of A");
  console.log(ret);  // 輸出  data A from server
  var retB = yield getFromSever("url of B");
  console.log(retB);  // 輸出  data B from server
})

上面的co就是一個(gè)非常簡(jiǎn)單的自動(dòng)執(zhí)行g(shù)enerator next的函數(shù)，且right這邊的值能正確傳到left，唯一的要求是getA的寫(xiě)法必須trunk的寫(xiě)法。像我們使用nodejs的一些異步api，可使用trunkify來(lái)轉(zhuǎn)成trunk形式。

在co內(nèi)部主要靠next來(lái)實(shí)現(xiàn)循環(huán)，靠外部cb()來(lái)驅(qū)動(dòng)運(yùn)行。大體流程如下：

了解了co原理，那就可以把它做得更強(qiáng)大一些，如支持Promise，支持nodejs寫(xiě)法的異常處理。這個(gè)可以參考co, trunks的代碼。

根據(jù)這個(gè)ECMAScript 6 compatibility table的資料顯示，目前已經(jīng)有如下平臺(tái)可以支持：

Chrome 35+ (about://flags中開(kāi)啟)
Firefox 31+ (默認(rèn)開(kāi)啟)
nodejs harmony
nodejs 0.11+

https://developer.mozilla.org...*
http://es6.ruanyifeng.com/#do...
http://kangax.github.io/compa...
http://www.slideshare.net/Ram...

本文首發(fā)于有贊技術(shù)博客: http://tech.youzan.com/es6-ge...