.说说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'

    });

});

```