这篇文章偏重入门实践,学习请点这里:
-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(); | |
} | |
| |
//执行ajax,传入回调函数 | v
function init() { v |
$.when(getData()) | |
.then( | |
function(){}, // 回调函数1,resolve执行 ------+------<---+
function(){} // 回调函数2,reject执行 _______|
);
}
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); // 相当于ajax的success
} else { // 请求返回值异常(如:未登录,无数据,参数异常)
dtd.reject(data); // 相当于ajax的success,只是并未返回预期数据
}
}).fail(function(data) { // ajax请求失败
dtd.reject(data); // 相当于ajax的fail
});
return dtd.promise();
}
//执行ajax,传入回调函数
function init() {
$.when(getData).then(
function (data){ // 回调函数1,resolve执行
console.log('resolve 处理逻辑执行');
},
function(data) { // 回调函数2,reject执行
console.log('reject 处理逻辑执行');
}
)
}
init();