用Promise解决多个异步Ajax请求导致的代码嵌套问题

最新推荐文章于 2021-08-25 16:48:40 发布

weixin_33948416

最新推荐文章于 2021-08-25 16:48:40 发布

阅读量255

点赞数

CC 4.0 BY-SA版权

文章标签： json

原文链接：https://juejin.im/post/5abc99af5188253640018392

本文介绍了一种使用Promise改进传统Ajax请求的方法，通过将连续的Ajax请求转换为Promise链，简化了代码并避免了回调地狱的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原来的代码

$.ajax({
    url:'/path1',
    success:function(data1){
        $.ajax({
            url:'/path2',
            data2:{
                msg:data1
            }
            success:function(data2){
                $.ajax({
                    url:'/path3',
                    data:{
                        msg:data1
                    }
                    success:function(data3){
                        console.log(data2+data3);
                    }
                });
            }
        });
    },
});
复制代码

用promise修改后的代码

function ajax(url,data,callback){
    var p=new Promise(function(resolve,reject){
        $.ajax({
            url:url,
            data:data==null ? "",JSON.stringify(data),
            async: true,
            contentType: "application/json",
            success: function (resp) {
                callback(resp);
                resolve();
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                if (XMLHttpRequest.status == "401") {
                    window.parent.location = '/enterprise/enterprise_login.html';
                    self.location = '/enterprise/enterprise_login.html';
                } else {
                    alert(XMLHttpRequest.responseText);
                }
                reject();
            }
        });
    });
    return p;
}
复制代码

端调用

ajax('/path1',null, function(resp){
    //do something on response
    data1.attr1 = resp.attr1;
}).then(
    ajax('/path2', data1, function(resp){
         //do something on response
    }
).then(
    ajax('/path3', data1, function(resp){
        //do something on response
   }
)
复制代码