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

653 阅读1分钟

原来的代码

$.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
   }
)