問題是；當我們網頁需要與後臺進行局部交換數據，我們使用ajax，例如；
var settings = {"async" : true,
"crossDomain" : true,
"url" : "suityourself",
"method" : "POST",
"datatype" : "json",
"headers" : {
"content-type" : "application/x-www-form-urlencoded"
},
data : {
"email" : "[email protected]"
},
error : function(XMLHttpRequest, data, object) {
console.log("XMLHttpRequest " + XMLHttpRequest.status + " error "
+ data + " object " + object);
alert("server is wrong");
},
success : function(response) {
console.log(response);
}
};
$.ajax(settings);
這是ajax普遍的做法
現在假設我們有三個方法，三個參數
var p1,p2,p3;
function runAsync1(p1) {
var def = $.Deferred();
//做一些異步操作
setTimeout(function() {
console.log(' 1 執行完成');
def.resolve(' 1 隨便什麼數據');
}, 2000);
return def.promise();
}
function runAsync2(p2) {
var def = $.Deferred();
//做一些異步操作
setTimeout(function() {
console.log(' 2 執行完成');
def.resolve(' 2 隨便什麼數據');
}, 2000);
return def.promise();
}
function runAsync3(p3) {
var def = $.Deferred();
//做一些異步操作
setTimeout(function() {
console.log(' 3 執行完成');
def.resolve(' 3 隨便什麼數據');
}, 2000);
return def.promise();
}
要求是；runAsync1執行完畢，runAsync2執行，runAsync2執行完畢，runAsync3執行。並且p1是runAsync1的參數，runAsync1返回結果是runAsync2的參數
runAsync2返回結果是runAsync3的參數。
可能直觀上是說在runAsync1中調用runAsync2並傳參，runAsync2中調用runAsync3並傳參。這樣形成一個方法調用串。
現在有了promise則可以不這麼做，例如
$.when(runAsync1(p1)).then(successfunction,failurefunction);
$.when(runAsync1())
.then(function(){
$.when(runAsync2()).then(function(){
$.when(runAsync3()).then(function(){
console.log("全部完成");
},function(){
});
},function(){
});
},function(){
});
這樣即可異步串行了。其實這樣等價於方法嵌套調用。下面是另一種用法，但是無法達到效果
$.when(runAsync1(),runAsync2(),runAsync3()).then(function(){
三個方法異步完成，但是無法將runAsync1()的返回傳遞給runAsync2()，runAsync2()的返回傳遞給runAsync3()
},function(){
有一個方法失敗，則都會失敗。
});