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

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

• • 引入Promise
• • 其实现代浏览器都已经内置支持了Promise，连第三方库都不需要了，只有IE不行，放弃了
• • 改造ajax封装函数，在成功的时候调用resolve()，失败的时候调用reject()，并且返回Promise对象

1.封装ajax

function ajax(url, data, callback) {
    var p = new Promise(function (resolve, reject) {
        $.ajax({
            url: url,
            type: data == null ? 'GET' : 'POST',
            dataType: "json",
            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") {
                    //可以进行跳转等等的操作
                } else {

                }
                reject();
            }
        });
    });
    return p;
}

2.

ajax('/prefix/entity1/action1',null, function(resp){
     //do something on response
     someData.attr1 = resp.attr1;
}).then(
     ajax('/prefix/entity2/action2', someData, function(resp){
          //do something on response
     }
).then(
     initVue() ;
).then(
     //do  something else
)