使用JQuery Deferred对象的then() 解决多个AJAX操作顺序依赖的问题

原文地址：http://www.2cto.com/kf/201507/424202.html

之前的文章javascript异步代码的回调地狱中提到了编写AJAX代码经常遇到的3个问题，现在我们看下如何利用then()解决第2个问题：如果AJAX请求之间存在依赖关系，我们的代码就会形成Pyramid of Doom（金字塔厄运）。比如我们要完成这样一件事：有4个供Ajax访问的url地址，需要先Ajax访问第1个，在第1个访问完成后，用拿到的返回数据作为参数再访问第2个，第2个访问完成后再第3个...以此到4个全部访问完成。按照这样的写法，似乎会变成这样：

 $.ajax({
     url: url1,
     success: function(data){
         $.ajax({
             url: url2,
             data: data,
             success: function(data){
                 $.ajax({
                     //...
                 });
             }
         });
     }
 });

1.Deferred.then()相当于Deferred.done()、Deferred.fail()、Deferred.progress()的合体，可以同时注册3个状态下的回调函数。

 function success(data)
 {
     alert(success data =  + data);
 }

 function fail(data)
 {
     alert(fail data =  + data);
 }

 function progress(data)
 {
     alert(progress data =  + data);
 }

 var deferred = $.Deferred();

 // 一起注册回调
 deferred.then(success, fail, progress);

 // 分别注册回调
 deferred.done(success);
 deferred.fail(fail);
 deferred.progress(progress);

 deferred.notify(%);
 deferred.resolve(ok);

当然我们也可以像done()一样，多次调用then()注册回调函数。then()虽然可以这么使用，但是实际开发中一般不这么用，因为没有啥必要。JQuery1.8之前，这就是then()方法的作用。

2.Deferred.then()解决多个异步操作之间有依赖的问题，这才是then()真正有意义的场景。JQuery1.8之后，then()取代了过时的pipe()方法。这种场景下，我们需要使用Deferred.then()返回的新Promise对象。上面的第一种使用方式，我们忽略了Deferred.then()的返回值。

 var deferred = $.Deferred();

 // 使用then()注册一个resolved状态的回调函数,并返回一个过滤后的promise
 // 返回的filtered已经不是原来的Deferred或者Promise对象了
 var filtered = deferred.then(function( value ) {
                 alert(trigger Deferred filter.value=+value);//
                 return value * ;
             });

 // 用过滤后的Promise再次注册回调函数
 filtered.done(function( value ) {
     alert(filtered value= + value);//
 });

 deferred.resolve(  );

我们用deferred.then()注册了一个完成状态下的回调函数，这个回调函数得到的值是5；之后用filtered这个新的Promise注册回调函数，这个回调函数中得到的值是10(第一个回调函数的返回结果)。现在我们看下JQuery官方对then的解释:

These filter functions can return a new value to be passed along to the promise's .done() or .fail() callbacks, or they can return another observable object (Deferred, Promise, etc) which will pass its resolved / rejected status and values to the promise's callbacks. If the filter function used is null, or not specified, the promise will be resolved or rejected with the same values as the original.

我们知道deferred.resolve()、deferred.reject()、deferred.notify()可以指定参数值，这个参数会传递给相应状态下的回调函数。如果我们使用的是done()、fail()、progress()注册的回调函数，那么某个状态下的所有回调函数得到的都是相同参数。但是如果我们使用了then()注册回调函数，那么第一回调函数的返回值将作为第二个回调函数的参数，同样的第二个函数的返回值是第三个回调函数的参数。可以对比下面的2段代码，体会下done()和then的差别。

 var deferred = $.Deferred();

 // done()返回的仍然是原来的Deferred对象
 var done_ret = deferred.done(function(data){
     alert(data=+data);//
     return  * data;
 });
 alert(deferred == done_ret);//true

 done_ret.done(function(data){
     alert(data=+data);//
 });

 deferred.resolve(  );

 var deferred = $.Deferred();

 // then()返回的是一个新Promise对象
 //then注册的回调函数的返回值将作为这个新Promise的参数
 var then_ret = deferred.then(function(data){
     alert(data=+data);//
     return  * data;
 });
 alert(then_ret == deferred);//false

 then_ret.done(function(data){
     alert(data=+data);//
 });

 deferred.resolve(  );

同样地，Deferred.then也能够实现rejected和pending状态的回调函数过滤

 var defer = $.Deferred();
 var filtered = defer.then( null, function( value ) {
     return value * ;
   });

 defer.reject(  );

 filtered.fail(function( value ) {
   alert( Value is ( * = ) :  + value );
 });

下面这段代码可以实现chain tasks，解决异步操作中回调难的问题。

 var defered = $.Deferred();

 var promise1 = defered.then(function(data){
     alert(data);//
     return data+=;
 });

 var promise2 = promise1.then(function(data){
     alert(data);//
     return data+=;
 });

 var promise3 = promise2.then(function(data){
     alert(data);//
     return data+=;
 });

 promise3.done(function(data){
     alert(data);//
 });

 defered.resolve();

正是由于then()这个特性，我们就可以上面复杂的AJAX嵌套改成如下形式:

 var promise1 = $.ajax(url1);
 var promise2 = promise1.then(function(data){
     return $.ajax(url2, { data: data });
 });
 var promise3 = promise2.then(function(data){
     return $.ajax(url3, { data: data });
 });
 promise3.done(function(data){
     // data retrieved from url3
 });