欢迎访问移动开发之家(rcyd.net),关注移动开发教程。移动开发之家  移动开发问答|  每日更新
页面位置 : > > > 内容正文

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

来源: 开发者 投稿于  被查看 4933 次 评论:182

用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
)

用户评论