20170522-10:47： 早晨再看react dva有關(guān)的東西膘魄，雖然基于redux、但突然發(fā)現(xiàn)與redux的react項(xiàng)目結(jié)構(gòu)有一定區(qū)別。特別是dva將action和reducer封裝到model中，異步流程采用Generator處理，看到這里呢岗，就索性搜了一下generator、之前也用過(guò)蚯妇，但沒(méi)具體了解》罅牵現(xiàn)在來(lái)好好了解一下吧。

本文參考來(lái)源：http://www.ruanyifeng.com/blog/2015/04/generator.html

javascript只有一根線程箩言，如果沒(méi)有異步編程硬贯，根本沒(méi)法用，非卡死不可陨收。

以前異步編程的方法大致有下面四種：
回調(diào)函數(shù) 事件監(jiān)聽 發(fā)布/訂閱 Promise 對(duì)象

在ES6中饭豹，作為下一代的Javascript語(yǔ)言鸵赖，提供了更強(qiáng)大、跟完善的ES6異步編程方法拄衰。

異步編程的語(yǔ)法目標(biāo)它褪，就是怎樣讓它更像同步編程。

一：什么是異步翘悉？

————————————————————————————————————
所謂"異步"茫打，簡(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í)行传货，就叫做同步屎鳍。

同步

二：回調(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)用"筷畦。

三： Promise

————————————————————————————————————
回調(diào)函數(shù)本身并沒(méi)有問(wèn)題词裤，它的問(wèn)題出現(xiàn)在多個(gè)回調(diào)函數(shù)嵌套刺洒。橫向發(fā)展，亂!不好管理吼砂！
Promise就是為了解決這個(gè)問(wèn)題而提出的逆航。

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);
});

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ù)的數(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ù)的用法

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

var fetch = require('node-fetch');
function* gen(){ 
    var url = '[https://api.github.com/users/github](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 方法现诀。