ajax解决回调地狱,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 

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 

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'

});

});

```