10.jQuery工具方法$.ajax()，回调地狱以及解决方法
# 回调地狱
- 因为$.ajax()嵌套过多，导致回调地狱，形成三角形代码
```js
$.ajax({
url: 'https://www.baidu.com',//随便写的地址，不能使用
type: 'GET',
success: function (res) {
$.ajax({
url: 'https://www.taobao.com',//随便写的地址，不能使用
type: 'GET',
data: {
accountId: 20200515
},
success:function(res){
$.ajax({
url: 'https://www.tencent.com',//随便写的地址，不能使用
type: 'GET',
data: {
accountId: 20200515
},
success:function(res){
$.ajax({
url: 'https://www.douban.com',//随便写的地址，不能使用
type: 'GET',
data: {
accountId: 20200515
},
success:function(res){
console.log(res);
}
});
}
});
}
});
}
});
```
- $.Deferred()//延迟对象
```js
//做一件异步的事情
function createScore(){
var df = $.Deferred();
setInterval(function(){
var score = Math.random() * 100;
if(score > 90){
df.resolve('通过');//触发done()
}else if(score < 80){
df.reject('未通过');//触发reject()
}else{
df.notify('请耐心等候');//触发progress()
}
}, 1500);
//df.promise()返回一个阉割版的df对象，只能调用done fail progress三个方法
return df.promise();
}
//延迟对象
var df = createScore();
// done:成功; fail:失败; progress:正在进行;
// resolve; reject; notify;
df.done(function(ms){//注册成功的回调函数
console.log("成功" + ' ' + ms);
}).fail(function(ms){//注册失败的回调函数
console.log("失败" + ' ' + ms);
}).progress(function(ms){//注册进行的回调函数
console.log("等待......" + ' ' + ms);
});
```
- $.Deferred().then()
```js
//做一件异步的事情
function createScore(){
var df = $.Deferred();
setInterval(function(){
var score = Math.random() * 100;
if(score > 90){
df.resolve('通过');//触发done()
}else if(score < 80){
df.reject('未通过');//触发reject()
}else{
df.notify('请耐心等候');//触发progress()
}
}, 1500);
//df.promise()返回一个阉割版的df对象，只能调用done fail progress三个方法
return df.promise();
}
//延迟对象
var df = createScore();
// done:成功; fail:失败; progress:正在进行;
// resolve; reject; notify;
df.then(
function(){//注册成功的回调函数
var df = $.Deferred();
setTimeout(function(){
df.resolve("成功");
}, 1500);
return df.promise();
}, function(){//注册失败的回调函数
var df = $.Deferred();
setTimeout(function(){
df.resolve("失败");
}, 1500);
return df.promise();
},function(){//注册进行的回调函数
var df = $.Deferred();
setTimeout(function(){
df.resolve("等待......");
}, 1500);
return df.promise();
}
).then(
function(ms){//注册成功的回调函数
console.log(ms + "resolve");
}, function(ms){//注册失败的回调函数
console.log(ms + "reject");
}, function(ms){//注册进行的回调函数
console.log(ms + "notify");
}
);
```
## 使用then解决回调地狱
```js
(function(){
return $.ajax({
url: 'https://www.baidu.com',//随便写的地址，不能使用
type: 'GET'
});
})().then(function(res){//成功
if(res.data.msg == 'success'){
var df = $.Deferred();
$.each(res.data.arr, function(index, ele){
var $btn = $("button");
$btn.on('click', function(){
df.resolve(this);
});
});
return df.promise();
}
}).then(function(res){//成功
res.css({width:'100px',height:'100px',background:'red'});
return $.ajax({
url: 'https://www.tencent.com',//随便写的地址，不能使用
type: 'GET'
});
}).then(function(res){//成功
return $.ajax({
url: 'https://www.douban.com',//随便写的地址，不能使用
type: 'GET'
});
});
```
以上是markdown格式的笔记
赞 (0)