zoukankan      html  css  js  c++  java
  • 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({'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格式的笔记
  • 相关阅读:
    shell进行mysql统计
    java I/O总结
    Hbase源码分析:Hbase UI中Requests Per Second的具体含义
    ASP.NET Session State Overview
    What is an ISAPI Extension?
    innerxml and outerxml
    postman
    FileZilla文件下载的目录
    how to use webpart container in kentico
    Consider using EXISTS instead of IN
  • 原文地址:https://www.cnblogs.com/lanshanxiao/p/12897185.html
Copyright © 2011-2022 走看看