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格式的笔记
posted @ 2020-05-15 21:07  lanshanxiao  阅读(707)  评论(0编辑  收藏  举报