摘要：因?yàn)闉g覽器環(huán)境里是單線程的，所以異步編程在前端領(lǐng)域尤為重要。除此之外，它還有兩個(gè)特性，使它可以作為異步編程的完整解決方案函數(shù)體內(nèi)外的數(shù)據(jù)交換和錯(cuò)誤處理機(jī)制。

在我們?nèi)粘＞幋a中，需要異步的場(chǎng)景很多，比如讀取文件內(nèi)容、獲取遠(yuǎn)程數(shù)據(jù)、發(fā)送數(shù)據(jù)到服務(wù)端等。因?yàn)闉g覽器環(huán)境里Javascript是單線程的，所以異步編程在前端領(lǐng)域尤為重要。

所謂異步，是指當(dāng)一個(gè)過(guò)程調(diào)用發(fā)出后，調(diào)用者不能立刻得到結(jié)果。實(shí)際處理這個(gè)調(diào)用的過(guò)程在完成后，通過(guò)狀態(tài)、通知或者回調(diào)來(lái)通知調(diào)用者。

比如我們寫(xiě)這篇文字時(shí)點(diǎn)擊發(fā)布按鈕，我們并不能馬上得到文章發(fā)布成功或者失敗。等待服務(wù)器處理，這段時(shí)間我們可以做其他的事情，當(dāng)服務(wù)器處理完成后，通知我們是否發(fā)布成功。

所謂同步，是指當(dāng)一個(gè)過(guò)程調(diào)用發(fā)出后，必須等待這個(gè)過(guò)程處理完成后，再處理其他事情。即堵塞執(zhí)行。

在es6之前，我們實(shí)現(xiàn)異步有4種方法，回調(diào)、事件、發(fā)布訂閱和promise方式。

function dealTask(param, callback) {
    // Deal with some time consuming tasks.
    // ...
    Object.prototype.toString.call(callback) === "[object Function]" ? callback() : null; 
}
 
dealTask({ id: 1 }, function() {
    console.log("... I am in the callback...");
})

回調(diào)的方式來(lái)實(shí)現(xiàn)異步其實(shí)就是把需要在當(dāng)前任務(wù)完成后執(zhí)行的函數(shù)當(dāng)成參數(shù)傳入，完成任務(wù)后執(zhí)行即可。

function dealTask(param) {
    // Deal with some time consuming tasks.
    // ...
    events.trigger("dealTaskFinish")
}
events.on("dealTaskFinish", function() {
    console.log("...I am in the end...");
})

通過(guò)事件來(lái)實(shí)現(xiàn)回調(diào)，好處是方便實(shí)用，跨模塊傳遞數(shù)據(jù)。壞處是，事件用的多了后業(yè)務(wù)邏輯混亂，不知道哪里注冊(cè)過(guò)哪里監(jiān)聽(tīng)過(guò)。

另外需要注意的是在web component場(chǎng)景下，mount后注冊(cè)過(guò)的事件需要在unmount釋放，不然會(huì)導(dǎo)致內(nèi)存泄露。

發(fā)布訂閱的簡(jiǎn)單例子是，一個(gè)開(kāi)關(guān)，同時(shí)并聯(lián)幾個(gè)燈泡(在不同房間)，觸發(fā)的時(shí)候，幾個(gè)燈泡都會(huì)得到指令，然后執(zhí)行發(fā)光的行為。

// 使用pubsubz實(shí)現(xiàn)
var testSubscriber = function(data ){
    console.log(data );
};
var testSubscription = pubsubz.subscribe( "example", testSubscriber );
pubsubz.publish( "example", "hello" );

訂閱發(fā)布與的性質(zhì)與"事件監(jiān)聽(tīng)"類(lèi)似，不同的是，我們可以通過(guò)查看"消息中心"，了解存在多少信號(hào)、每個(gè)信號(hào)有多少訂閱者，從而監(jiān)控程序的運(yùn)行。

function helloWorld (ready) {
    return new Promise(function (resolve, reject) {
        if (ready) {
            resolve("Hello World!")
        } else {
            reject("Good bye!")
        }
    })
}

helloWorld(true).then(function (message) {
    console.log(message)
}, function (error) {
    console.log(error)
})

Promises對(duì)象是CommonJS工作組提出的一種規(guī)范，是對(duì)異步編程的一種統(tǒng)一，其實(shí)也就是語(yǔ)法糖，可閱讀性變強(qiáng)了而已。

在ES6出來(lái)以后，我們的異步方式也發(fā)生了改變。

Generator函數(shù)是協(xié)程在ES6的實(shí)現(xiàn)，最大特點(diǎn)就是可以交出函數(shù)的執(zhí)行權(quán)（即暫停執(zhí)行）。

Generator函數(shù)可以暫停執(zhí)行和恢復(fù)執(zhí)行，這是它能封裝異步任務(wù)的根本原因。除此之外，它還有兩個(gè)特性，使它可以作為異步編程的完整解決方案：函數(shù)體內(nèi)外的數(shù)據(jù)交換和錯(cuò)誤處理機(jī)制。

function* Foo(x) {
  yield x + 1;

  var y = yield null;
  return x + y;
}

var foo = Foo(5);
foo.next();     // { value: 6, done: false }
foo.next();     // { value: null, done: false }
foo.next(8);    // { value: 13, done: true }

next方法返回值的value屬性，是Generator函數(shù)向外輸出數(shù)據(jù)；next方法還可以接受參數(shù)，這是向Generator函數(shù)體內(nèi)輸入數(shù)據(jù)。

yield命令用于將程序的執(zhí)行權(quán)移出Generator函數(shù)，那么就需要一種方法，將執(zhí)行權(quán)再交還給Generator函數(shù)

上面的方式，是我們手動(dòng)調(diào)用Generator函數(shù)執(zhí)行，但是當(dāng)我們的需要執(zhí)行next方法很多時(shí)，就需要Generator函數(shù)自動(dòng)執(zhí)行了。

Generator函數(shù)自動(dòng)執(zhí)行的意思是，通過(guò)一定的方法來(lái)自動(dòng)執(zhí)行next方法，比如：

function autoRunGen(gen){
  var g = gen();

  function next(data){
    var result = g.next(data);
    if (result.done) return result.value;
    result.value.then(function(data){
      next(data);
    });
  }
  next();
}

co模塊是TJ開(kāi)發(fā)的一個(gè)小工具，用于Generator函數(shù)的自動(dòng)執(zhí)行。他的主要思想和上面的代碼片段類(lèi)似。

使用co的前提條件是，Generator函數(shù)的yield命令后面，只能是Promise對(duì)象。

co(function *() {
    var data = yield $.get("/api/data");
    console.log(data);
    var user = yield $.get("/api/user");
    console.log(user);
    var products = yield $.get("/api/products");
    console.log(products);
});

co模塊使得我們可以像寫(xiě)同步代碼一樣，寫(xiě)異步代碼。

async函數(shù)僅僅是Generator函數(shù)的語(yǔ)法糖。

var fs = require("fs");

var readFile = function (fileName) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fileName, function(error, data) {
      if (error) reject(error);
      resolve(data);
    });
  });
};

var gen = function* (){
  var f1 = yield readFile("/etc/a.js");
  var f2 = yield readFile("/etc/b.js");
  console.log(f1.toString());
  console.log(f2.toString());
};

使用async/await方式:

var asyncReadFile = async function (){
  var f1 = await readFile("/etc/a.js");
  var f2 = await readFile("/etc/b.js");
  console.log(f1.toString());
  console.log(f2.toString());
};

async函數(shù)就是將Generator函數(shù)的星號(hào)（*）替換成async，將yield替換成await，僅此而已。

不同的是，Generator執(zhí)行需要手動(dòng)執(zhí)行，而async函數(shù)可以自動(dòng)執(zhí)行，像寫(xiě)同步一樣寫(xiě)異步。Generator返回Iterator對(duì)象，async函數(shù)返回Promise對(duì)象。