异步 JS: Callbacks, Listeners, Control Flow Libs 和 Promises【转载+翻译+整理】
http://sporto.github.io/blog/2012/12/09/callbacks-listeners-promises/
或
http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html
当用 Javascript 处理异步（asynchronous ）时，你可以使用很多工具。本文说明四个异步的方法和工具，以及它们的优势：回调（Callbacks）、监听（Listeners）、流程控制库（Control Flow Libraries）和 Promises。
示例场景
为了说明这四个工具，让我们创建一个简单的示例场景。
我们想查找（find）一些记录，然后处理（process）它们，最后返回处理后的结果。这两个操作（查找和处理）是异步的。
回调
回调是处理异步编程的最基本最公认的方式。
回调方式像如下形式：
finder([1, 2], function(results) {
// do something
});
在回调方式中，我们调用一个执行异步操作的函数。传递的其中一个参数是一个函数，当操作完成时，它会被调用。
设置
为了说明它们如何运行，我们需要两个函数，find 和 process，分别用来查找和处理记录。在实际中，这些函数会发出 AJAX 请求，并返回结果，但是现在，我们可以简单使用 timeout。
function finder(records, cb) {
setTimeout(function () {
records.push(3, 4);
cb(records);
}, 1000);
}
function processor(records, cb) {
setTimeout(function () {
records.push(5, 6);
cb(records);
}, 1000);
}
使用回调
完成这些功能的代码像如下形式：
finder([1, 2], function (records) {
processor(records, function(records) {
console.log(records);
});
});
finder 函数里有一个回调，processor 函数里也有一个回调。
通过传递另一个函数的引用，上面嵌套的回调可以写得更清晰。
function onProcessorDone(records){
console.log(records);
}
function onFinderDone(records) {
processor(records, onProcessorDone);
}
finder([1, 2], onFinderDone);
控制台将输出 [1,2,3,4,5,6]
完整示例如下所示：
// setup
function finder(records, cb) {
setTimeout(function () {
records.push(3, 4);
cb(records);
}, 500);
}
function processor(records, cb) {
setTimeout(function () {
records.push(5, 6);
cb(records);
}, 500);
}
// using the callbacks
finder([1, 2], function (records) {
processor(records, function(records) {
console.log(records);
});
});
// or
function onProcessorDone(records){
alert(records);
}
function onFinderDone(records) {
processor(records, onProcessorDone);
}
finder([1, 2], onFinderDone);
说明
- 这是最常见的方式，比较熟悉，很容理解。
- 在你的库/函数中很容易实现。
结论
如上所示，嵌套的回调将可能形成一个“泛滥”的局面，当你有很多嵌套等级时，很难阅读。但通过分割函数，如上所示，也很容易修复。
对于一个给定的事件，你只能传递一个回调，在很多情况下，这可能是一个很大的限制。
监听
监听也是很常见的方式，jQuery 和 其他 DOM 库都使用该方式。任务的执行不取决于代码的顺序，而取决于某个事件是否发生。
监听方式像如下形式所示：
finder.on('done', function (event, records) {
// do something
});
我们在一个对象上调用一个函数，该对象是一个添加的侦听器对象。在该函数中，我们传递想监听的事件名称和回调函数。 “on”是该功能的许多常见名称之一，其他常见名称如”bind”、“listen”、“addEventListener”、“observe”功能类似。
设置
现在为该示例做些设置，设置比上面的回调示例多些。
首先，我们需要两个对象，用于查询和处理记录。
var finder = {
run: function (records) {
var self = this;
setTimeout(function () {
records.push(3, 4);
self.trigger('done', [records]);
}, 1000);
}
}
var processor = {
run: function (records) {
var self = this;
setTimeout(function () {
records.push(5, 6);
self.trigger('done', [records]);
}, 1000);
}
}
注意，当运行完成时，它们会调用一个触发器（trigger ）的方法，我们通过 min-in 向这些对象添加方法。另外，“trigger ”也是该功能的常见名称之一，其他常见名称如“fire”、“publish”。
我们需要一个已经具备监听行为的 min-in 对象，在这种情况下，我们将依靠 jQuery：
var eventable = {
on: function(event, cb) {
$(this).on(event, cb);
},
trigger: function (event, args) {
$(this).trigger(event, args);
}
}
然后，把这个行为应用到我们的 finder 和 processor 对象：
$.extend(finder, eventable);
$.extend(processor, eventable);
使用监听
完成监听的代码，如下所示：
finder.on('done', function (event, records) {
processor.run(records);
});
processor.on('done', function (event, records) {
console.log(records);
});
finder.run([1,2]);
控制台将输出 [1,2,3,4,5,6]
完整代码如下所示：
// using listeners
var eventable = {
on: function(event, cb) {
$(this).on(event, cb);
},
trigger: function (event, args) {
$(this).trigger(event, args);
}
}
var finder = {
run: function (records) {
var self = this;
setTimeout(function () {
records.push(3, 4);
self.trigger('done', [records]);
}, 500);
}
}
var processor = {
run: function (records) {
var self = this;
setTimeout(function () {
records.push(5, 6);
self.trigger('done', [records]);
}, 500);
}
}
$.extend(finder, eventable);
$.extend(processor, eventable);
finder.on('done', function (event, records) {
processor.run(records);
});
processor.on('done', function (event, records) {
alert(records);
});
finder.run([1,2]);
说明
- 这是另一个很容易理解的方式。
- 最大的优势在于，对每个对象的一个监听函数，没有限制，你可以向一个对象添加很多监听函数，如下所示：
finder
.on('done', function (event, records) {
// do something
})
.on('done', function (event, records) {
// do something else
});
结论
- 该方式比回调麻烦点，因此，你可能会使用现成的库，如 jQuery, bean.js。
- 每个事件可以指定多个回调函数，有利于实现模块化。
- 问题是整个程序都要变成事件驱动型，运行流程会变得很不清晰。
流程控制库
流程控制库也是解决异步代码的很好方式。我特别喜欢的一个是 Async.js。
使用 Async.js 的像代码如下所示：
async.series([
function(){ ... },
function(){ ... }
]);
设置（示例一）
我们也需要两个函数，跟其他例子一样，实际中，我们可能需要发送 AJAX 请求，并返回结果。现在，我们仅仅使用 timeout.
function finder(records, cb) {
setTimeout(function () {
records.push(3, 4);
cb(null, records);
}, 1000);
}
function processor(records, cb) {
setTimeout(function () {
records.push(5, 6);
cb(null, records);
}, 1000);
}
节点持续传递的风格（The Node Continuation Passing Style）
注意，在上面函数内部，回调中使用的风格。
cb(null, records);
回调中第一个参数，若没有错误发生，则为空；否则为错误。这是在 Node.js 中常见的方式，Async.js 也使用这种方式。通过使用这种风格，Async.js 和回调之间的流程变得相当简单。
使用 Async
实现该功能的代码像如下形式所示：
async.waterfall([
function(cb){
finder([1, 2], cb);
},
processor,
function(records, cb) {
alert(records);
}
]);
Async.js 关心，当之前的已经完成后，按顺序调用每个函数。注意，我们仅仅传递了“processor”函数，这是因为我们使用节点持续风格。正如你所看到的，代码很少，而且很容易理解。
完整代码如下所示：
// setup
function finder(records, cb) {
setTimeout(function () {
records.push(3, 4);
cb(null, records);
}, 500);
}
function processor(records, cb) {
setTimeout(function () {
records.push(5, 6);
cb(null, records);
}, 500);
}
async.waterfall([
function(cb){
finder([1, 2], cb);
},
processor
,
function(records, cb) {
alert(records);
}
]);
另一个设置（示例二）
现在，当做前段开发（front-end development）时，有一个遵照 callback(null, results) 声明的库，是不可能的。因此，一个更实际的示例如下所示：
function finder(records, cb) {
setTimeout(function () {
records.push(3, 4);
cb(records);
}, 500);
}
function processor(records, cb) {
setTimeout(function () {
records.push(5, 6);
cb(records);
}, 500);
}
// using the finder and the processor
async.waterfall([
function(cb){
finder([1, 2], function(records) {
cb(null, records)
});
},
function(records, cb){
processor(records, function(records) {
cb(null, records);
});
},
function(records, cb) {
alert(records);
}
]);
尽管这变得有点令人费解，但是至少你能够看到从上到下运行的流程。
完整代码如下所示：
// setup
function finder(records, cb) {
setTimeout(function () {
records.push(3, 4);
cb(records);
}, 500);
}
function processor(records, cb) {
setTimeout(function () {
records.push(5, 6);
cb(records);
}, 500);
}
async.waterfall([
function(cb){
finder([1, 2], function(records) {
cb(null, records)
});
},
function(records, cb){
processor(records, function(records) {
cb(null, records);
});
},
function(records, cb) {
alert(records);
}
]);
说明
- 一般，使用控制流程库得代码较容易理解，因为它遵循一个自然的顺序（从上到下）。这对回调和监听不是。
结论
- 如果函数的声明不匹配，像第二个示例，那么你可以辩称，流量控制库在可读性方面提供的较少。
Promises
最后是我们的最终目的地。Promises 是非常强大的工具，是 CommonJS 工作组提出的一种规范，目的是为异步编程提供统一接口。
使用 promises 代码像如下方式：
finder([1,2])
.then(function(records) {
// do something
});
这将很大程度上取决于你使用的 promises 库，本例我使用 when.js。每一个异步任务返回一个 Promise 对象，该对象有一个 then 方法，允许指定回调函数。
设置
finder 和 processor 函数像如下所示：
function finder(records){
var deferred = when.defer();
setTimeout(function () {
records.push(3, 4);
deferred.resolve(records);
}, 500);
return deferred.promise;
}
function processor(records) {
var deferred = when.defer();
setTimeout(function () {
records.push(5, 6);
deferred.resolve(records);
}, 500);
return deferred.promise;
}
每个函数创建一个 deferred 对象，并返回一个 promise。然后，当结果到达时，它解析 deferred。
使用 promises
实现该功能的代码像如下所示：
finder([1,2])
.then(processor)
.then(function(records) {
alert(records);
});
该方法很简单，很容易理解。promises 使你代码很简洁，就像按照一个自然的流程。注意，在第一个回调，我们如何简单传递“processor”函数，这是因为这个函数返回一个 promise 自身，这样，所有一切都将很好地“流动”。
完整代码如下所示：
// using promises
function finder(records){
var deferred = when.defer();
setTimeout(function () {
records.push(3, 4);
deferred.resolve(records);
}, 500);
return deferred.promise;
}
function processor(records) {
var deferred = when.defer();
setTimeout(function () {
records.push(5, 6);
deferred.resolve(records);
}, 500);
return deferred.promise;
}
finder([1,2])
.then(processor)
.then(function(records) {
alert(records);
});
There is a lot to promises:
- 作为常规对象来传递
- 聚合到一个更大的 promises
- 为失败的 promises 添加处理函数
- 回调函数变成了链式写法，程序的流程可以看得很清楚，而且有一整套的配套方法，可以实现许多强大的功能。
promises 的最大优势
现在，如果你认为，这就是 promises 所有，那么你正错过我认为的最大优势。Promises 具有一个回调、监听或是控制流程都没有的“绝招”。你可以向 promise 添加一个监听器，即使它已经被解析，在这种情况下，监听将会立即触发，这意味着，你不用担心，当你添加监听，事件是否已经发生。此功能同样适用于聚集的 promises。如下所示：
function log(msg) {
document.write(msg + '<br />');
}
// using promises
function finder(records){
var deferred = when.defer();
setTimeout(function () {
records.push(3, 4);
log('records found - resolving promise');
deferred.resolve(records);
}, 100);
return deferred.promise;
}
var promise = finder([1,2]);
// wait
setTimeout(function () {
// when this is called the finder promise has already been resolved
promise.then(function (records) {
log('records received');
});
}, 1500);
对在浏览器中处理用户交互来说，这是个巨大的功能。在复杂的应用程序中，你可能不是用户将采取的行动的现在顺序，因此，你可以使用 promises 来跟踪用户交互。如果有兴趣的话，参看 post。
说明
- Really powerful, you can aggregate promises, pass them around, or add listeners when already resolved.
结论
- The least understood of all these tools.
- They can get difficult to track when you have lots of aggregated promises with added listeners along the way.
结论
在我看来，以上解决异步变成的四种主要工具。希望对你理解它们有所帮助。
