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)

相关推荐

  • Promis.then()

    Promis.then()

  • 10个常见的工程造价难题及解决方法

    临时施工洞口的钢筋混凝土过梁和按规范埋设的拉结筋是否可以计算工程量吗? 按照合理的施工组织设计(经过建设单位和监理单位批准)而留置的施工洞,施工时所发生的临时过梁.砌体拉结钢筋等费用,应该进入工程预算 ...

  • win8/10 bcdboot引导修复命令的原理和使用方法

    (本文所述已用UEFI+GPT.BIOS+MBR,WIN10 64位企业版和专业版测试过) 在win8/10系统中有一条BCDboot.exe命令,它是一种快速设置系统启动分区或修复系统启动环境的命令 ...

  • 电脑上最值得推荐的10款工具软件大盘点

    更新一波实用且好用的工具,希望对大家有所帮助! 以下工具百度搜索名称即可获取 搜索工具-传送门 传送门这是一个非常简洁的搜索工具,传送门这个工具不会根据搜索关键词追踪用户,也不会通过历史搜索内容做广告 ...

  • 10种常见网站安全攻击手段及防御方法

    在某种程度上,互联网上的每个网站都容易遭受安全攻击.从人为失误到网络罪犯团伙发起的复杂攻击均在威胁范围之内. 网络攻击者最主要的动机是求财.无论你运营的是电子商务项目还是简单的小型商业网站,潜在攻击的 ...

  • 职场人常用的10个工具 | SWOT/WBS/PDCA/思维导图…

    时间管理之四象限原理 时间管理(Time Management)就是用技巧.技术和工具帮助人们完成工作,实现目标:最重要的功能是透过事先的规划,做为一种提醒与指引.时间管理的目的除了要决定你该做些什么 ...

  • 10.16午评:回调完全正常,关注支撑!

    今日两市早盘在利好的助推下小幅高开,随后在以大金融为首的"三剑客"(银行.保险.券商)拉升下,迅速收复3000点整数关口.但是盘中资金跟随意愿不强,冲高回落.各大指数分化,银行为首 ...

  • 宝宝不吃辅食,萌贝树母婴加盟店10大品牌教您解决方法

    宝宝开始吃辅食了,但是这也不吃那也不吃,或者吃几口就不吃了:有些辅食做起来你可能要花一个小时甚至好几个小时,但到头来宝宝一口都不碰,相信不少家长经常遇到这样的困惑.别急,今天就和萌贝树小编就带着大家一 ...

  • 10种简便易行、适合关节功能锻炼的方法1...

    10种简便易行.适合关节功能锻炼的方法 1.头颈运动 以颈为轴,依次向前.后.左.右做低头.仰头及侧面屈头,共做40次.然后再做顺时针 和逆时针方向的转头,各做2次 2.肩关节运动 一臂由前方从颈旁伸 ...

  • 有哪些Windows激活工具值得推荐?WinXP/7/8.1/10激活工具介绍

    有哪些Windows激活工具值得推荐?很多用户知道小马激活工具,却很少信任其他工具的激活方式,如果用户使用的是组装机,并且安装了Ghost系统,如果不能用小马工具激活还能使用哪些激活工具呢? 有哪些W ...