异步 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.
结论
在我看来,以上解决异步变成的四种主要工具。希望对你理解它们有所帮助。
异步 JS: Callbacks, Listeners, Control Flow Libs 和 Promises【转载+翻译+整理】的更多相关文章
- Asynchronous JS: Callbacks, Listeners, Control Flow Libs and Promises
非常好的文章,讲javascript 的异步编程的. ------------------------------------------------------------------------- ...
- 你所必须掌握的三种异步编程方法callbacks,listeners,promise
目录: 前言 Callbacks Listeners Promise 前言 coder都知道,javascript语言运行环境是单线程的,这意味着任何两行代码都不能同时运行.多任务同时进行时,实质上形 ...
- SSIS的 Data Flow 和 Control Flow
Control Flow 和 Data Flow,是SSIS Design中主要用到的两个Tab,理解这两个Tab的作用,对设计更高效的package十分重要. 一,Control Flow 在Con ...
- [翻译] TensorFlow 分布式之论文篇 "Implementation of Control Flow in TensorFlow"
[翻译] TensorFlow 分布式之论文篇 "Implementation of Control Flow in TensorFlow" 目录 [翻译] TensorFlow ...
- Control Flow in Tensorflow TF中的控制流解析
写在前面 本文翻译自Tensorflow团队的文章Tensorflow Control Flow Implementation,部分内容加入了笔者自己的理解,如有不妥之处还望各位指教. 目录 概览 控 ...
- Control Flow 如何处理 Error
在Package的执行过程中,如果在Data Flow中出现Error,那么Data Flow component能够将错误行输出,只需要在组件的ErrorOutput中进行简单地配置,参考<D ...
- 关于Control flow
1.一个package包含一个control flow并且一个或多个data flow. (这个项目叫做 Integration services project,提供了三种不同类型的control ...
- Core Java Volume I — 3.8. Control Flow
3.8. Control FlowJava, like any programming language, supports both conditional statements and loops ...
- 异步JS:$.Deferred的使用
异步JS:$.Deferred的使用 原文链接:http://www.html5rocks.com/en/tutorials/async/deferred/ 当我们构建一个平稳的,响应式的HTML5应 ...
随机推荐
- Idea2018激活破解
原文:https://www.imsxm.com/2018/07/idea-2018-1-5-crack-patcher.html 最近更新了Intellij IDEA到2018.1.5之后,使用之前 ...
- C#编程(十九)----------部分类
部分类 C#中使用关键字partial把类,结构或结构放在多个文件中.一般情况下,一个类全部驻留在单个文件中.但有时候,多个开发人员需要访问同一个类,或者某种类型的代码生成器生成了一个类的某部分,所以 ...
- bat与jscript开发工具时遇到的一些问题
之前使得bat调用luac进行编译时,会弹出一个"黑色的界面",闪烁一下,感觉不太好.而脚本vbs或者jscript调用bat是可以利用Run方法,将其第二个参数设置为0便可以隐藏 ...
- Mac与Mac之中的共享方式
前往 ---> 连接服务器 ---> 输入smb://带连接的服务器地址(smb://192.168.1.40)即可
- SQLite中的增删改查
虽然android提供了sql查询的封装方法,但是理解起来还是麻烦,所以我这里用sql语句来完成工作. 首先是建立一个类,继承SQLiteOpenHelper 这里面会建立一个数据库,并且初始化一个表 ...
- 用ArrayAdapter来创建Spinner(自定义布局、默认布局、动态内容、静态内容)
android:dropDownWidth 下拉列表宽度 android:dropDownHorizontalOffset 下拉列表距离左边的距离 android:dropDownV ...
- [PHP] 6种负载均衡算法
CP from : https://www.cnblogs.com/SmartLee/p/5161415.html http://www.dataguru.cn/thread-559329-1-1. ...
- LaTeX技巧206:使用gather输入多行公式的技巧
上文中提到了几个输入多行公式的环境,gather也是其中之一,gather输入的好处是每一行,他都会按照前文的编号计数器进行向下计数,这样保证了公式编号的连贯性.所以,当我们输入公式的每一行公式需要独 ...
- input type=file 选择图片并且实现预览效果的实例
为大家带来一篇input type=file 选择图片并且实现预览效果的实例. 通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型, ...
- POJO与PO、VO的区别
http://www.cnblogs.com/wangjunwei/p/3859360.html POCO的概念是从java的POJO借用而来,而两者的含义是一致的,不同的仅仅是使用的语言不一样.所以 ...