前言

因專案需要從LiveScript轉為ES6, 所以最近看了阮一峰的ES6教程，主要感興趣的是ES6對JS的非同步程式設計新的解決方案，ES6增加了promise和Generator等解決方法。現在我們來大致理清一下到ES6為止的JS非同步解決的思路以及他們各自的優缺點。

起因

我們都知道JS是單執行緒的，這也正是非同步程式設計對於JS很重要的原因，因為它無法忍受耗時太長的操作。
正因如此有一系列的實現非同步的方法

方法一 setTimeout

常用於：定時器，動畫效果
用法：setTimeout(func|code, delay)

缺點：

setTimeout 的主要問題在於，它並非那麼精確。譬如通過setTimeout()設定一個任務在10毫秒後執行，但是在9毫秒之後，有一個任務佔用了5毫秒的CPU時間片，再次輪到定時器執行時，時間就已經過期4毫秒
—-《深入淺出Nodejs》

為什麼呢？ 我們可以瞭解一下setTimeout執行的事件迴圈圖

Javascript執行引擎的主執行緒執行的時候，產生堆（heap）和棧（stack）。程式中程式碼依次進入棧中等待執行，當呼叫setTimeout()方法時，即圖中右側WebAPIs方法時，瀏覽器核心相應模組開始延時方法的處理，當延時方法到達觸發條件時，方法被新增到用於回撥的任務佇列(注意是任務佇列)，只要執行引擎棧中的程式碼執行完畢，主執行緒就會去讀取任務佇列，依次執行那些滿足觸發條件的回撥函式。

方法二 事件監聽

任務的執行不取決於程式碼的順序，而取決於某個事件是否發生。
用法：f1.on(‘done’, f2);
優點：比較容易理解，可以繫結多個事件，每個事件可以指定多個回撥函式，而且可以”去耦合”，有利於實現模組化。
缺點：整個程式都要變成事件驅動型，執行流程會變得很不清晰。

方法三 回撥函式

注意：以下所有的例子中 a.md檔案 存放的字串為”b”, b.md檔案存放的字串為”this is b”;

什麼是回撥函式？

JavaScript語言對非同步程式設計的實現，就是回撥函式。所謂回撥函式，就是把任務的第二段單獨寫在一個函式裡面，等到重新執行這個任務的時候，就直接呼叫這個函式。

這裡有一個誤區

回撥函式是實現JS非同步的一種方法，並不是說回撥函式就是非同步的。
只是我們用的大多數回撥函式都是用於非同步
非同步的定義：
在JavaScript中，回撥函式具體的定義為：函式A作為引數(函式引用)傳遞到另一個函式B中，並且這個函式B執行函式A。我們就說函式A叫做回撥函式。如果沒有名稱(函式表示式)，就叫做匿名回撥函式。

因此callback 不一定用於非同步，一般同步(阻塞)的場景下也經常用到回撥，比如要求執行某些操作後執行回撥函式。

簡單的回撥函式例子

var fs = require('fs');

fs.readFile("a.md", function(err, data) {
  console.log(data.toString());
});

執行結果：
b

回撥函式的缺點

回撥函式本身並沒有問題，它的問題出現在多個回撥函式巢狀。
假定讀取A檔案之後，從A檔案中獲取B檔名，再讀取B檔案，程式碼如下。

var fs = require('fs');

fs.readFile("a.md", function (err, data) {
    console.log(data.toString());
    fs.readFile(data.toString() + ".md", function(err, data) {
        console.log(data.toString());
    });
});

執行結果：
b
this is b

想想，如果再巢狀多幾層，程式碼會變得多麼難以理解
這個被稱之為“回撥函式噩夢”（callback hell）！！！

方法四 Promise物件

為了解決上面的問題，我們開始介紹Promise物件，Promise原本只是社群提出的一個構想，一些外部函式庫率先實現了這個功能。ECMAScript 6將其寫入語言標準，因此目前JavaScript語言原生支援Promise物件

假設要依次讀取多個檔案，如果用普通的回撥函式，就會出現多重巢狀。程式碼不是縱向發展，而是橫向發展，很快就會亂成一團，無法管理。

var readFile = require('fs-readfile-promise');

readFile("a.md")
    .then(function(data) {
        console.log(data.toString());
        return readFile(data.toString() + ".md");
    })
    .then(function(data) {
        console.log(data.toString());
    })
    .catch(function (err) {
        console.log(err);
    });

執行結果：
b
this is b

Promise的優缺點：

優點：Promise 的寫法是回撥函式的改進，使用then方法以後，非同步任務的兩段執行看得更清楚了。then將原來非同步函式的巢狀關係轉變為鏈式步驟

缺點：Promise 的最大問題是程式碼冗餘，原來的任務被Promise 包裝了一下，不管什麼操作，一眼看去都是一堆 then，原來的語義變得很不清楚。

所以，ES6在把Promise納入標準的同時，也提供了另一種實現 => Generator 函式

方法五 Generator函式

特點： 帶星號function，yield語句 ，next() 獲取下一個yield表示式中yield後的值，擁有遍歷器介面，與for..of可搭配使用

Generator實現斐波那契的例子：

function * fibonacci() {
    let [prev, curr] = [1, 0];
    for (;;) {
        [prev, curr] = [curr, prev + curr];
        yield curr;
    }
}

for (let n of fibonacci()) {
    if (n > 1000) break;
    console.log(n);
}

執行結果
1
1
2
3
5
8
13
21
34
55
89
144
233
377
610
987

Generator用於非同步操作

下面程式碼中，Generator函式封裝了一個非同步操作，該操作先讀取一個遠端介面，然後從JSON格式的資料解析資訊。這段程式碼非常像同步操作，除了加上了yield命令

var fetch = require('node-fetch');

function * gen() {
    var url = 'http://api.github.com/users/github';
    var result = yield fetch(url);
    console.log(result.bio);
}

var g = gen();
var result = g.next();

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

執行結果：
How people build software.

執行過程：

首先執行Generator函式，獲取遍歷器物件，然後使用next 方法（第二行），執行非同步任務的第一階段。由於Fetch模組返回的是一個Promise物件，因此要用then方法呼叫下一個next 方法。

缺點：

可以看到，雖然 Generator 函式將非同步操作表示得很簡潔，但是流程管理卻不方便（即何時執行第一階段、何時執行第二階段）。即如何實現自動化的流程管理。

自此我們引出新的補充方案： Thunk函式和Co模組

Generator函式之–用Thunk函式實現自動化流程管理的例子

var fs = require('fs');
var thunkify = require('thunkify');
var readFile = thunkify(fs.readFile);

function run(fn) {
    var gen = fn();

    function next(err, data) {
        var result = gen.next(data);
        if (result.done) return;
        result.value(next);
    }

    next();
}

var gen = function *() {
    var f1 = yield readFile('a.md');
    console.log(f1.toString());
    var f2 = yield readFile(f1.toString() + ".md");
    console.log(f2.toString());
};

run(gen);

執行結果：
b
this is b

執行過程：

上面程式碼的run函式，就是一個Generator函式的自動執行器。內部的next函式就是Thunk的回撥函式。next函式先將指標移到Generator函式的下一步（gen.next方法），然後判斷Generator函式是否結束（result.done 屬性），如果沒結束，就將next函式再傳入Thunk函式（result.value屬性），否則就直接退出。

Thunk函式的限制

有了這個執行器，執行Generator函式方便多了。不管有多少個非同步操作，直接傳入run函式即可。當然，前提是每一個非同步操作，都要是Thunk函式，也就是說，跟在yield命令後面的必須是Thunk函式。

Generator函式之–用CO模組來實現自動化流程管理的例子

var fs = require('fs');
var thunkify = require('thunkify');
var readFile = thunkify(fs.readFile);
var co = require('co');

var gen = function* (){
  var r1 = yield readFile('a.md');
  console.log(r1.toString());
  var r2 = yield readFile(r1.toString() + '.md');
  console.log(r2.toString());
};


co(gen).then(function() {
    console.log('Generator函式執行完畢');
});

執行結果：
b
this is b
Generator函式執行完畢

執行過程：

co函式返回一個Promise物件，因此可以用then方法添加回調函式。

CO模組的限制：

co模組其實就是將兩種自動執行器（Thunk函式和Promise物件），包裝成一個模組。使用co的前提條件是，Generator函式的yield命令後面，只能是Thunk函式或Promise物件。

總結

至此，介紹了幾種JS用於處理非同步的方法，我們也可以看到ES6對非同步的處理要比之前的版本更加成熟。整理的幾種方法的使用及其優缺點，有的地方可能還不完善，為了便於理解，使用的例子也比較簡單。後續如果有新的理解會一一補充。

大神TJ

值得一提的是，這其中涉及到的一個極為優秀的程式設計師，TJ Holowaychuk，程式設計師兼藝術家，Koa、Co、Express、jade、mocha、node-canvas、commander.js 等知名開源專案的建立和貢獻者。有興趣的可以自行了解一下該大神的成就。

膜拜至極。