一、前言
jQuery1.5之前,如果需要多次Ajax操作,我们一般会使用下面的两种方式:
1).串行调用Ajax
$.ajax({ success: function() { $.ajax({ success: function() { $.ajax({ //callbacks... }); }); });
这种方式代码可读性差,效率低,晦涩难懂,调试和排错的复杂度大。
2).并行调用Ajax
var promises = []; $.ajax({ success: function() { promises.push('resolved'); check(); } }); $.ajax({ success: function() { promises.push('resolved'); check(); } }); $.ajax({ success: function() { promises.push('resolved'); check(); } }); var check = function() { //checks for all 3 values in the promises array }
这种方式对于callbacks函数调用来说已经很不错了,并行取得数据,可读性良好。缺点就是代码冗长,可扩展性差,调试和排错的复杂度高。
jQuery1.5之后,增加了deferred对象。因此可以用下面这种方式实现和上面同样的需求。
1)Promise
var address = $.ajax({}); var tweets = $.ajax({}); var facebook = $.ajax({}); render_side_bar = function(address, tweets, facebook){ //render sidebar } render_no_side_bar = function () { } $.when(address, tweets, facebook).then(render_side_bar, render_no_side_bar)
可以看出,代码可读性良好,可扩展性高,并且大大降低了调试和排错的复杂度。
那么问题来了,promises和deferred对象究竟是个什么玩意呢?
二、详解
2.什么是deferred对象?
deferred对象即延迟对象,它是jQuery 1.5版本引入的一种回调函数的解决方案,代表了将要完成的某种操作,并且提供了一些方法,帮助用户使用。
deferred对象是对Promises接口的实现。jQuery 1.5版本以及之后所有的Ajax返回的jqXHR对象就是一个deferred对象。
2.deferred对象的几大好处
2.1.为同一操作指定多个回调函数
deferred对象的好处之一,就是它允许你为一个操作添加多个回调函数,这在传统的ajax中是无法实现的。
$.ajax("test.html") .done(function(){ alert("first success callback!");} ) .fail(function(){ alert("there is an error!"); } ) .done(function(){ alert("second success callback!");} );
2.2.为多个操作指定同一个回调函数
deferred对象的好处之二,就是它允许你为多个操作指定同一个回调函数,这在传统的ajax中也是无法实现的。
$.when($.ajax({}), $.ajax({})) .done(function(){ alert("success!"); }) .fail(function(){ alert("error!"); });
2.3.非Ajax操作的回调函数
deferred对象的好处之三,就是它不再拘泥于ajax操作,任意的操作(ajax操作or本地操作/异步操作or同步操作)都可以使用deferred对象,指定回调函数。
一个很典型的耗时操作
var dfd = $.Deferred(); // create a deferred object var wait = function(dtd){ var tasks = function(){ alert("over!"); dtd.resolve(); // change the state of the deferred object from pending to resolved }; setTimeout(tasks,50000); return dtd; };
$.when(wait(dtd)) .done(function(){ alert("success!"); }) .fail(function(){ alert("error!"); });
2.4.链式调用
jQuery中传统的ajax操作是这样的:
$.ajax({ url: "", success: function(){ alert("success!"); }, error:function(){ alert("error!"); } });
其中success指定ajax操作成功后的回调函数,error指定ajax操作失败后的回调函数。jQuery1.5版本之前,Ajax操作返回的是一个XMLHTTPRequest对象,不支持链式操作。1.5版本开始,ajax操作返回的是jqXHR对象,这是一个deferred对象,而deferred对象一个显著的好处就是可以进行链式操作,因为deferred对象的所有方法返回的均是deferred对象。
现在的ajax操作的写法是:
$.ajax({}) .done(function(){ alert("success!"); }) .fail(function(){ alert("fail!"); });
两种写法对比可以很明显的看出来,done()相当于传统ajax操作的success方法,fail()相当于传统ajax操作的fail方法。相对于传统的写法,代码可读性提高了。
3.deferred对象的方法
3.1基本用法
(1).生成deferred对象
var dfd = $.Deferred(); //create a deferred object
(2).deferred对象的状态
deferred对象有三种状态
pending:表示操作处于未完成的状态,任何deferred(延迟)对象开始于pending状态。
resolved:表示操作成功。
rejected:表示操作失败。
state()方法返回deferred对象的当前状态。
$.Deferred().state(); // 'pending' $.Deferred().resolve().state(); // 'resolved' $.Deferred().reject().state(); // 'rejected'
(3).改变deferred对象的状态
调用deferred.resolve() 或者 deferred.resolveWith()转换Deferred(递延)到resolved(解决)的状态,并立即执行设置中任何的doneCallbacks。
var callbackFunc = function(){console.log(arguments[0]);} var dfd = $.Deferred(); dfd.done(callbackFunc); dfd.resolve("hello"); //'hello'
调用deferred.reject() 或者 deferred.rejectWith()转换Deferred(递延)到rejected(拒绝)的状态,并立即执行设置中任何的failCallbacks。
var callbackFunc = function(){console.log(arguments[0]);} var dfd = $.Deferred(); dfd.fail(callbackFunc); dfd.reject("fail"); //'fail'
(4).绑定回调函数