jQuery之deferred优雅的异步处理方式

本例基于jquery1.9.1

示例1:多ajax链式调用

$.ajax({
  url:"/app/1",
  success:fucntion(data){
      $.ajax({
          url:"/app/2",
          success:fucntion(data){
                $.ajax({
                    "url":"/app/3",
                    "success":function(data){//do something.}
                });
          }
    });
  }
});

上面的代码相信很多人都写过，有没有更优雅的方式呢？
从jq1.5之后就引入了deferred对象，ajax返回的就是defferrd对象，因此我们的程序可以改造为下面的方式

$.ajax({
   url:"/app/1"
}).done(function(data1){//前一个ajax返回值
  $.ajax({
      url:"/app/2"
  })
}).done(function(data2){//前一个ajax返回值
  $.ajax({
      url:"/app/3"
  })
});

看起来是不是很吊的样子，这种链式写法看起来至少比嵌套干净了很多，可读性也很好。

示例2：多ajax异步调用，等待结果

var count=0;
var doCount= function(){
  count++;
};
var doOthers= function(){
  //do something.
};
$.get("/app/1",doCount);
$.get("/app/2",doCount);
$.get("/app/3",doCount);
var key= setInterval(function(){
  if(count==3){
      doOthers();
      clearInterval(key);
  }
},2000)

 上面的代码估计很多人写过，为了解决等待多个ajax都返回之后，在去执行后面的任务,这样写性能很差，而且代码也很难维护。
看看下面的新写法：

$.when($.get("/app/1",doCount),
       $.get("/app/2",doCount),
       $.get("/app/3",doCount)
).done(function(data1,data2,data3){
   alert("success！");
 })
 .fail(function(){ alert("fail！"); });

Deferred常用api

$.ajax('data/url')
     .done(function(response, statusText, jqXHR){
         console.log(statusText);
     })
    .fail(function(jqXHR, statusText, error){
         console.log(statusText);
     })
     .always(function(){
        console.log('I will always done.');
     });
 

 Deferred总结：

（1）  $.Deferred()  生成一个deferred对象。
（2） deferred.done() 指定操作成功时的回调函数
（3） deferred.fail() 指定操作失败时的回调函数
（4） deferred.promise() 没有参数时，返回一个新的deferred对象，该对象的运行状态无法被改变；接受参数时，作用为在参数对象上部署deferred接口。
（5） deferred.resolve() 手动改变deferred对象的运行状态为"已完成"，从而立即触发done()方法。
（6）deferred.reject() 这个方法与deferred.resolve()正好相反，调用后将deferred对象的运行状态变为"已失败"，从而立即触发fail()方法。
（7） $.when() 为多个操作指定回调函数。
（8）deferred.then() 有时为了省事，可以把done()和fail()合在一起写，这就是then()方法。

$.when($.ajax( "/main.php" ))
　　.then(successFunc, failureFunc );

如果then()有两个参数，那么第一个参数是done()方法的回调函数，第二个参数是fail()方法的回调方法。如果then()只有一个参数，那么等同于done()。 

（9）deferred.always()

这个方法也是用来指定回调函数的，它的作用是，不管调用的是deferred.resolve()还是deferred.reject()，最后总是执行。

$.ajax( "test.html" )
　　.always( function() { alert("已执行！");} ); 

 上面有部分内容摘自http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html

本文原文地址：https://blog.csdn.net/weixin_34113237/article/details/88251117