DIV CSS 佈局教程網

回調地獄

對 JavaScript 程序員來說，處理回調是家常，但是處理層次過深的回調就沒有那麼美好了，下面的示例代碼片段用了三層回調，再補腦一下更多層的場景，簡直是酸爽，這就是傳說中的回調地獄。

getDirectories(function(dirs) {
  getFiles(dirs[0], function(files) {
    getContent(files[0], function(file, content) {
      console.log('filename:', file);
      console.log(content);
    });
  });
});
 
function getDirectories(callback) {
 setTimeout(function() {
  callback(['/home/ben']);
 }, 1000);
}
 
function getFiles(dir, callback) {
  setTimeout(function() {
    callback([dir + '/test1.txt', dir + '/test2.txt']);
  }, 1000)
}
 
function getContent(file, callback) {
  setTimeout(function() {
    callback(file, 'content');
  }, 1000)
}

解決方案

生態圈中有很多異步解決方案可以處理回調地獄的問題，比如 bluebird、Q 等，本文重點介紹 ECMAScript 6/7 規范中對異步編程的支持。

ES6 Promise

Promise 是一種異步編程的解決方案，是解決回調地獄問題的利器。

Promise 在 JavaScript 生態圈被主流接受是在 2007 年 Dojo 框架增加了 dojo.Deferred 的功能。隨著 dojo.Deferred 的流行，在 2009 年 Kris Zyp 提出了 CommonJS Promises/A 規范。隨後生態圈中出現了大量 Promise 實現包括 Q.js、FuturesJS 等。當然 Promise 之所有這麼流行很大程度上是由於 jQuery 的存在，只是 jQuery 並不完全遵守 CommonJS Promises/A 規范。隨後正如大家看到的，ES 6 規范包含了 Promise。
MDN 中對 Promise 是這樣描述的：

Promise 對象是一個返回值的代理，這個返回值在promise對象創建時未必已知。它允許你為異步操作的成功或失敗指定處理方法。 這使得異步方法可以像同步方法那樣返回值：異步方法會返回一個包含了原返回值的
以下的代碼是「回調地獄」一節中的示例通過 Promise 實現，看上去代碼也不是很簡潔，但是比起傳統的層級回調有明顯改善，代碼可維護性和可讀性更強。

getDirectories().then(function(dirs) {
  return getFiles(dirs[0]);
}).then(function(files) {
  return getContent(files[0]);
}).then(function(val) {
  console.log('filename:', val.file);
  console.log(val.content);
});
 
function getDirectories() {
  return new Promise(function (resolve, reject) {
    setTimeout(function() {
    resolve(['/home/ben']);
   }, 1000);
  });
}
 
function getFiles(dir) {
  return new Promise(function (resolve, reject) {
    setTimeout(function() {
      resolve([dir + '/test1.txt', dir + '/test2.txt']);
    }, 1000);
  });
}
 
function getContent(file) {
  return new Promise(function (resolve, reject) {
    setTimeout(function() {
      resolve({file: file, content: 'content'});
    }, 1000);
  });
}

ES6 Generator

Promise 的實現方式還不夠簡潔，我們還需要更好的選擇，co 就是選擇之一。co 是基於 Generator（生成器）的異步流控制器，了解 co 之前首先需要理解 Generator。熟悉 C# 的同學應該都有了解，C# 2.0 的版本就引入了 yield 關鍵字，用於迭代生成器。ES 6 Generator 跟 C# 相似，也使用了 yield 語法糖，內部實現了狀態機。具體用法可以參考 MDN 的文檔 function* 一節，原理可以參考AlloyTeam 團隊 Blog 深入理解 Generator。使用 co 巧妙結合 ES6 Generator 和 ES6 Promise 讓異步調用更加和諧。

co(function* (){
  var dirs = yield getDirectories();
  var files = yield getFiles(dirs[0]);
  var contentVal = yield getContent(files[0]);
  console.log('filename:', contentVal.file);
  console.log(contentVal.content);
});

co 非常巧妙，其核心代碼可以簡化如下的示例，大體思路是采用遞歸遍歷生成器直到狀態完成，當然 co 做的跟多。

runGenerator();
 
function* run(){
  var dirs = yield getDirectories();
  var files = yield getFiles(dirs[0]);
  var contentVal = yield getContent(files[0]);
  console.log('filename:', contentVal.file);
  console.log(contentVal.content);
}
 
function runGenerator(){
  var gen = run();
 
  function go(result){
    if(result.done) return;
    result.value.then(function(r){
      go(gen.next(r));
    });
  }
 
  go(gen.next());
}

ES7 Async/Await

ES6 Generator 確實很好，只可惜需要第三方庫的支持。好消息是 ES 7 會引入 Async/Await 關鍵字完美解決異步調用的問題。好吧，.net 又領先了一步，.net framework 4.5 已經率先支持了。
今後的代碼寫起來是這樣：

run();
async function run() {
  var dirs = await getDirectories();
  var files = await getFiles(dirs[0]);
  var contentVal = await getContent(files[0]);
  console.log('filename:', contentVal.file);
  console.log(contentVal.content);
}

結論

從經典的回調的異步編程方式，到 ES6 Promise 規范對異步編程的改善，再到 co 結合 ES Generator 優雅處理，最後 ES7 async/await 完美收官，可以讓我們了解為什麼 ECMAScript 會出現這些特性以及解決了什麼問題，更加清晰地看到 JavaScript 異步編程發展的脈絡。