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

本文主要是介绍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()方法。