這篇文章偏重入門實踐锻离,學(xué)習(xí)請點這里:
-jQuery的deferred對象詳解——阮一峰
-讀jQuery之二十(Deferred對象)——Snandy
骨感的語法
// ajax請求封裝
function getData(){
var dtd = $.Deferred();
$.ajax({url:'test.php'})
.done(function() {dtd.resolve(); }) ---->--------------------+
.fail(function() {dtd.reject(); }); --->----------+ |
return dtd.promise(); | |
} | |
| |
//執(zhí)行ajax,傳入回調(diào)函數(shù) | v
function init() { v |
$.when(getData()) | |
.then( | |
function(){}, // 回調(diào)函數(shù)1,resolve執(zhí)行 ------+------<---+
function(){} // 回調(diào)函數(shù)2眉菱,reject執(zhí)行 _______|
);
}
init();
有血有肉的demo代碼:
// ajax請求封裝
function getData(){
var dtd = $.Deferred();
$.ajax({
url: 'www.baidu.com/test.php',
dataType: 'jsonp', // 可選,跨域
jsonp: 'cb', // 可選润歉,跨域
data: {
action : 'r',
}
}).done(function(data) { // ajax請求成功
if(data.status == '0') {
dtd.resolve(data); // 相當(dāng)于ajax的success
} else { // 請求返回值異常(如:未登錄璧眠,無數(shù)據(jù),參數(shù)異常)
dtd.reject(data); // 相當(dāng)于ajax的success嫂粟,只是并未返回預(yù)期數(shù)據(jù)
}
}).fail(function(data) { // ajax請求失敗
dtd.reject(data); // 相當(dāng)于ajax的fail
});
return dtd.promise();
}
//執(zhí)行ajax娇未,傳入回調(diào)函數(shù)
function init() {
$.when(getData).then(
function (data){ // 回調(diào)函數(shù)1,resolve執(zhí)行
console.log('resolve 處理邏輯執(zhí)行');
},
function(data) { // 回調(diào)函數(shù)2星虹,reject執(zhí)行
console.log('reject 處理邏輯執(zhí)行');
}
)
}
init();