回撥地獄
對 JavaScript 程式設計師來說，處理回撥是家常，但是處理層次過深的回撥就沒有那麼美好了，下面的示例程式碼片段用了三層回撥，再補腦一下更多層的場景，簡直是酸爽，這就是傳說中的回撥地獄。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
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 實現，看上去程式碼也不是很簡潔，但是比起傳統的層級回撥有明顯改善，程式碼可維護性和可讀性更強。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
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 讓非同步呼叫更加和諧。
|
1 2 3 4 5 6 7 |
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 做的跟多。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
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 已經率先支援了。
今後的程式碼寫起來是這樣：
|
1 2 3 4 5 6 7 8 |
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 非同步程式設計發展的脈絡。
參考：
Async JavaScript
MDN JavaScript reference – Promise
MDN JavaScript reference – function*
深入理解 Generator
ECMAScript 6入門