在jQuery1.5中使用deferred对象 着放大镜看Promise


Posted in Javascript onMarch 12, 2011
引言

在那篇经典的关于jQuery1.5中Deferred使用方法介绍的文章中(译文见这里),有下面一段描述:

$.ajax() returns an object packed with other deferred-related methods. I discussed promise(), but you'll also find then(), success(), error(), and a host of others. You don't have access to the complete deferred object, though; only the promise, callback-binding methods, and the isRejected() and isResolved() methods, which can be used to check the state of the deferred.
But why not return the whole object? If this were the case, it would be possible to muck with the works, maybe pragmatically "resolve" the deferred, causing all bound callbacks to fire before the AJAX request had a chance to complete. Therefore, to avoid potentially breaking the whole paradigm, only return the dfd.promise().

这段话非常令人费解,我也是看了几遍才看明白。大致的意思是:
$.ajax()返回一个对象(jqXHR,这是对原生的XMLHttpRequest的封装),这个对象包含了deferred相关的函数,比如promise(), then(), success(), error(), isRejected(), isResolved()。
但是你发现没,这里面没有resolve(), resolveWith(), reject(), rejectWith() 几个函数,而这几个函数才是用来改变deferred对象流程。也就是说$.ajax()返回了一个只读的deferred对象

下面erichynds改用反问的语气提出,为什么不返回完整的deferred对象,而只返回只读的deferred对象?
如果返回完整的deferred对象,那么外部程序就能随意的触发deferred对象的回调函数,很有可能在AJAX请求结束前就触发了回调函数(resolve),这就是与AJAX本身的逻辑相违背了。
所以为了避免不经意间改变任务的内部流程,我们应该只返回deferred的只读版本(dfd.promise())。

为了说明$.ajax()和$.Deferred()返回的deferred对象的不同,请看下面的例子:

// deferred对象所有的方法数组 
var methods = 'done,resolveWith,resolve,isResolved,then,fail,rejectWith,reject,isRejected,promise'.split(','), 
method, 
ajaxMethods = [], 
onlyInDeferredMethods = []; 
for (method in $.ajax()) { 
if ($.inArray(method, methods) !== -1) { 
ajaxMethods.push(method); 
} 
} for (method in $.Deferred()) { 
if ($.inArray(method, methods) !== -1 && $.inArray(method, ajaxMethods) === -1) { 
onlyInDeferredMethods.push(method); 
} 
} 
// 存在于$.Deferred(),但是不存在于$.ajax()的deferred相关方法列表为: 
// ["resolveWith", "resolve", "rejectWith", "reject"] 
console.log(onlyInDeferredMethods);

反面教材
如果$.ajax()返回的对象包含resolve(), resolveWith(),可能会产生哪些影响呢?
我们还是用例子也说明,首先看看erichynds原文的第一个例子:
// $.get, 异步的AJAX请求 
var req = $.get('./sample.txt').success(function (response) { 
console.log('AJAX success'); 
}).error(function () { 
console.log('AJAX error'); 
}); // 添加另外一个AJAX回调函数,此时AJAX或许已经结束,或许还没有结束 
// 由于$.ajax内置了deferred的支持,所以我们可以这样写 
req.success(function (response) { 
console.log('AJAX success2'); 
}); 
console.log('END');

执行结果为:
END -> AJAX success -> AJAX success2

下面修改jQuery1.5源代码,为$.ajax()的返回值添加resolve()和resolveWith()函数:

// Attach deferreds 
deferred.promise( jqXHR ); 
jqXHR.success = jqXHR.done; 
jqXHR.error = jqXHR.fail; 
jqXHR.complete = completeDeferred.done; 
// 下面两行是我们手工增加的,jQuery源代码中没有 
jqXHR.resolve = deferred.resolve; 
jqXHR.resolveWith = deferred.resolveWith;

然后,执行下面代码:
// $.get, 异步的AJAX请求 
var req = $.get('./sample.txt').success(function (response) { 
console.log('AJAX success'); 
}).error(function () { 
console.log('AJAX error'); 
}); req.resolve(); 
// 添加另外一个AJAX回调函数,此时AJAX或许已经结束,或许还没有结束 
// 由于$.ajax内置了deferred的支持,所以我们可以这样写 
req.success(function (response) { 
console.log('AJAX success2'); 
}); 
console.log('END');

此时的执行结果为:
AJAX success -> AJAX success2 -> END

也就是说,在真实的AJAX请求结束之前,success的回调函数就已经被触发了,出现错误。

为了更清楚的看清这一切,我们手工给success回调函数传递一些伪造的参数:

// $.get, 异步的AJAX请求 
var req = $.get('./sample.txt').success(function (response) { 
console.log('AJAX success(' + response + ')'); 
}); req.resolve('Fake data'); 
// 添加另外一个AJAX回调函数,此时AJAX或许已经结束,或许还没有结束 
// 由于$.ajax内置了deferred的支持,所以我们可以这样写 
req.success(function (response) { 
console.log('AJAX success2(' + response + ')'); 
}); 
console.log('END');

此时的执行结果为:
AJAX success(Fake data) -> AJAX success2(Fake data) -> END

代码分析
在深入jQuery代码之前,先来看看jQuery.promise的文档:
The deferred.promise() method allows an asynchronous function to prevent other code from interfering with the progress or status of its internal request. The Promise exposes only the Deferred methods needed to attach additional handlers or determine the state (then, done, fail, isResolved, and isRejected), but not ones that change the state (resolve, reject, resolveWith, and rejectWith).
If you are creating a Deferred, keep a reference to the Deferred so that it can be resolved or rejected at some point. Return only the Promise object via deferred.promise() so other code can register callbacks or inspect the current state.

大致意思是说,deferred.promise()用来阻止其它代码修改异步任务的内部流程。Promise的对象只对外公开添加回调函数和检测状态的函数,而不包含修改状态的函数。
如果你手工创建了一个deferred对象,那么你要维持对这个deferred对象的引用,以此来修改状态触发回调函数。不过你的返回值应该是deferred.promise(),这样外部程序可以添加回调函数或检测状态,而不能修改状态。

至此,大家对promise应该有清晰的认识了。我们再来看下面两段代码,它们完成的功能完全一致:

function getData() { 
return $.get('/foo/'); 
} function showDiv() { 
// 正确代码。推荐做法。 
return $.Deferred(function (dfd) { 
$('#foo').fadeIn(1000, dfd.resolve); 
}).promise(); 
} 
$.when(getData(), showDiv()).then(function (ajaxResult) { 
console.log('The animation AND the AJAX request are both done!'); 
});

function getData() { 
return $.get('/foo/'); 
} function showDiv() { 
// 正确代码。不推荐这么做。 
return $.Deferred(function (dfd) { 
$('#foo').fadeIn(1000, dfd.resolve); 
}); 
} 
$.when(getData(), showDiv()).then(function (ajaxResult) { 
console.log('The animation AND the AJAX request are both done!'); 
});

虽然上面两段代码完成相同的任务,并且似乎第二段代码更加简洁,但是第二段代码却不是推荐的做法。
因为任务(showDiv)本身状态的更改应该保持在任务内部,而不需要对外公开,对外只需要公开一个promise的只读deferred对象就行了。

最后,我们来看看Deferred相关源代码:

// Promise相关方法数组 
promiseMethods = "then done fail isResolved isRejected promise".split( " " ), jQuery.extend( 
// 完备的deferred对象(具有两个回调队列) 
Deferred: function (func) { 
var deferred = jQuery._Deferred(), 
failDeferred = jQuery._Deferred(), 
promise; 
// 添加then, promise 以及出错相关的deferred方法 
jQuery.extend(deferred, { 
then: function (doneCallbacks, failCallbacks) { 
deferred.done(doneCallbacks).fail(failCallbacks); 
return this; 
}, 
fail: failDeferred.done, 
rejectWith: failDeferred.resolveWith, 
reject: failDeferred.resolve, 
isRejected: failDeferred.isResolved, 
// 返回deferred对象的只读副本 
// 如果将obj作为参数传递进去,则promise相关方法将会添加到这个obj上 
promise: function (obj) { 
if (obj == null) { 
if (promise) { 
return promise; 
} 
promise = obj = {}; 
} 
var i = promiseMethods.length; 
while (i--) { 
obj[promiseMethods[i]] = deferred[promiseMethods[i]]; 
} 
return obj; 
} 
}); 
// 确保只有一个回调函数队列可用,也就是说一个任务要么成功,要么失败 
deferred.done(failDeferred.cancel).fail(deferred.cancel); 
// 删除cancel函数 
delete deferred.cancel; 
// 将当前创建的作为参数传递到给定的函数中 
if (func) { 
func.call(deferred, deferred); 
} 
return deferred; 
});

如果你觉得上面的代码阅读比较困难,没关系我写了一个简单的类似代码:
Arr = function () { 
var items = [], 
promise, 
arr = { 
add: function (item) { 
items.push(item); 
}, 
length: function () { 
return items.length; 
}, 
clear: function () { 
items = []; 
}, 
promise: function () { 
if (promise) { 
return promise; 
} 
var obj = promise = {}; 
obj.add = arr.add; 
obj.length = arr.length; 
obj.promise = arr.promise; 
return obj; 
} 
}; 
return arr; 
}

上面代码定义了一个Arr,用来生成一个数组对象,包含一些方法,比如add(), length(), clear(), promise()。
其中promise()返回当前Arr对象的一个副本,只能向其中添加元素,而不能清空内部数组。
var arr = Arr(); 
arr.add(1); 
arr.add(2); 
// 2 
console.log(arr.length()); 
arr.clear(); 
// 0 
console.log(arr.length()); 
var arr = Arr(); 
arr.add(1); 
arr.add(2); 
// 2 
console.log(arr.length()); 
var promise = arr.promise(); 
promise.add(3); 
promise.add(4); 
// 4 
console.log(promise.length()); 
// Error: TypeError: promise.clear is not a function 
promise.clear();

deferred.promise()与deferred.promise().promise()
还记得前面提到的那两个完成相同功能的代码么?
function getData() { 
return $.get('/foo/'); 
} function showDiv() { 
// 这里返回promise()或者直接返回deferred对象,代码都能正确运行。 
return $.Deferred(function (dfd) { 
$('#foo').fadeIn(1000, dfd.resolve); 
}).promise(); 
} 
$.when(getData(), showDiv()).then(function (ajaxResult) { 
console.log('The animation AND the AJAX request are both done!'); 
});

那么你有没有思考过,为什么这两种方式都能运行呢?
如果你深入jQuery的源代码,你会发现$.when(obj1, obj2, ...)在内部实现时会获取obj1.promise():
if ( object && jQuery.isFunction( object.promise ) ) { 
object.promise().then( iCallback(lastIndex), deferred.reject ); 
}

所以我们来看上面showDiv的返回结果:
如果是deferred对象的话,$.when()通过下面方式得到promise:
$.Deferred().promise()

如果是deferred.promise()对象的话,$.when()通过下面方式得到promise:
$.Deferred().promise().promise()

那么是不是说:$.Deferred().promise() === $.Deferred().promise().promise()
我们还是通过示例来验证我们的想法:

var deferred = $.Deferred(), 
promise = deferred.promise(); 
// true 
promise === promise.promise(); 
// true 
promise === promise.promise().promise().promise();

当然,这个结果是推理出来的,如果我们直接看Deferred的源代码,也很容易看出这样的结果:
promise: function (obj) { 
if (obj == null) { 
// 在这里,如果promise已经存在(已经调用过.promise()),就不会重新创建了 
if (promise) { 
return promise; 
} 
promise = obj = {}; 
} 
var i = promiseMethods.length; 
while (i--) { 
obj[promiseMethods[i]] = deferred[promiseMethods[i]]; 
} 
return obj; 
}

总结

1. deferred.promise()返回的是deferred对象的只读属性。
2. 建议任务不要返回deferred对象,而是返回deferred.promise()对象。这样外部就不能随意更改任务的内部流程。
3. deferred.promise() === deferred.promise().promise() (上面我们分别从代码推理,和源代码分析两个角度得到这个结论)

本文由三生石上原创,博客园首发,转载请注明出处。

Javascript 相关文章推荐
40款非常棒的jQuery 插件和制作教程(系列一)
Oct 26 Javascript
jQuery extend 的简单实例
Sep 18 Javascript
JQuery插件开发示例代码
Nov 06 Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 Javascript
JS实现超精简响应鼠标显示二级菜单代码
Sep 12 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
node.js环境搭建图文详解
Sep 19 Javascript
vue实现随机验证码功能的实例代码
Apr 30 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 Javascript
JS判断数组四种实现方法详解
Jun 29 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 Javascript
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 #Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
Mar 12 #Javascript
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 #Javascript
JavaScript全局函数使用简单说明
Mar 11 #Javascript
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 #Javascript
始终在屏幕中间显示Div的代码(css+js)
Mar 10 #Javascript
javascript的函数、创建对象、封装、属性和方法、继承
Mar 10 #Javascript
You might like
个人写的PHP验证码生成类分享
2014/08/21 PHP
PHP实现的激活用户注册验证邮箱功能示例
2017/06/06 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
js实现的日期操作类DateTime函数代码
2010/03/16 Javascript
基于PHP+Jquery制作的可编辑的表格的代码
2011/04/10 Javascript
jquery中的 $("#jb51")与document.getElementById("jb51") 的区别
2011/07/26 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
2011/11/05 Javascript
JavaScript中的作用域链和闭包
2012/06/30 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
详解node.js平台下Express的session与cookie模块包的配置
2017/04/26 Javascript
layui实现数据表格点击搜索功能
2020/03/26 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
js校验开始时间和结束时间
2020/05/26 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
Python中常用信号signal类型实例
2018/01/25 Python
详解Python中的动态属性和特性
2018/04/07 Python
python 自动重连wifi windows的方法
2018/12/18 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
python3 常见解密加密算法实例分析【base64、MD5等】
2019/12/19 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
大学校庆邀请函
2014/01/11 职场文书
2014年小学图书室工作总结
2014/12/09 职场文书
小学运动会前导词
2015/07/20 职场文书
2016新春团拜会致辞
2015/08/01 职场文书