资讯专栏INFORMATION COLUMN

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

DobbyKim / 2774人阅读

摘要:问题前端小同学在做页面的时候,犯了个常见的错误把多个请求顺序着写下来了,而后面的请求,对前面请求的返回结果,是有依赖的。经提醒,发现从版开始,返回的就是对象了,那么函数可以直接返回的返回值

问题

前端小同学在做页面的时候,犯了个常见的错误:把多个Ajax请求顺序着写下来了,而后面的请求,对前面请求的返回结果,是有依赖的。如下面的代码所示:

var someData;
$.ajax({
            url: "/prefix/entity1/action1",
            type: "GET" ,
            async: true,
            contentType: "application/json",
            success: function (resp) {
                //do something on response
               someData.attr1 = resp.attr1;
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                //在这个页面里,所有的请求的错误都做同样的处理
                if (XMLHttpRequest.status == "401") {
                    window.location.href = "/login.html";
                } else {
                    alert(XMLHttpRequest.responseText);
                }
            }
        });

$.ajax({
            url: "/prefix/entity2/action2",
            type: "POST" ,
            dataType: "json",
            data: JSON.stringify(someData),
            async: true,
            contentType: "application/json",
            success: function (resp) {
                //do something on response
             },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                //在这个页面里,所有的请求的错误都做同样的处理
                if (XMLHttpRequest.status == "401") {
                    window.location.href = "/login.html";
                } else {
                    alert(XMLHttpRequest.responseText);
                }
            }
        });

以上代码有两个问题:
*首先就是执行顺序不能保证,action2很可能在action1返回之前就发出了,导致someData.attr1这个参数没能正确传出
*其次两个ajax请求的代码重复很严重

思路

代码重复的问题相对好解决,尤其是在自己的项目里,各种参数可以通过规范定死,封装一个参数更少的ajax方法就好了

//url:地址
//data:数据对象,在函数内部会转化成json串,如果没传,表示用GET方法,如果传了,表示用POST方法
function ajax(url, data, callback) {
        $.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);
            },
            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);
                }
            }
        });
}

这样只有url,data和callback三个必要的参数要填,其他都定死了

执行顺序的问题,可以把第二个请求放在第一个请求的回调里,形如:

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

至此问题似乎解决得很完美,但可以想见,如果请求不止两个,而是4、5个,同时还有其他异步操作(比如我们的页面里有Vue对象的初始化),相互之间有依赖关系,光是这样层层叠叠的括号嵌套,就已经让人头晕了。

需要找到一种方法,让异步调用的表达看起来像同步调用一样。

正好最近看了阮一峰老师关于ES6的书,而且用户也没有强硬要求兼容IE浏览器,于是就选择了Promise的方案

解决方案

引入Promise
其实现代浏览器都已经内置支持了Promise,连第三方库都不需要了,只有IE不行,放弃了

改造ajax封装函数,在成功的时候调用resolve(),失败的时候调用reject(),并且返回Promise对象

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") {
                    window.parent.location = "/enterprise/enterprise_login.html";
                    self.location = "/enterprise/enterprise_login.html";
                } else {
                    alert(XMLHttpRequest.responseText);
                }
                reject();
            }
        });
    });
    return p;
}

修改调用端

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
)

至此完美解决。

经@miroki 提醒,发现Jquery从1.5版开始,返回的就是thenable对象了,那么ajax函数可以直接返回$.ajax()的返回值

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/81769.html

相关文章

  • Promise学习总结

    摘要:引擎线程也称为内核,负责处理脚本程序例如引擎引擎线程负责解析脚本,运行代码。对象代表一个未完成但预计将来会完成的操作。注意一旦新建就会立即执行它属于,无法取消。 写在前面: 第一遍学Promise时, 只是大概过了一遍, 感觉学的不够深入, 这一篇算是对之前的一个总结吧. Promise在ES6中也属于一个较难理解的一部分; 所以在学习一个比较难理解的知识点时, 我们可以围绕这个知识点...

    twohappy 评论0 收藏0
  • JavaScript 异步进化史

    摘要:签订协议的两方分别是异步接口和。在异步函数中,使用异常捕获的方案,代替了的异常捕获的方案。需要注意的是,在异步函数中使异步函数用时要使用,不然异步函会被同步执行。 同步与异步 通常,代码是由上往下依次执行的。如果有多个任务,就必需排队,前一个任务完成,后一个任务才会执行。这种执行模式称之为: 同步(synchronous) 。新手容易把计算机用语中的同步,和日常用语中的同步弄混淆。如,...

    luzhuqun 评论0 收藏0
  • 从源码看 Promise 概念与实现

    摘要:从源码看概念与实现是异步编程中的重要概念,它较好地解决了异步任务中回调嵌套的问题。这些概念中有趣的地方在于,标识状态的变量如都是形容词,用于传入数据的接口如与都是动词,而用于传入回调函数的接口如及则在语义上用于修饰动词的副词。 从源码看 Promise 概念与实现 Promise 是 JS 异步编程中的重要概念,它较好地解决了异步任务中回调嵌套的问题。在没有引入新的语言机制的前提下,这...

    kel 评论0 收藏0
  • 【笔记】 你不知道JS读书笔记——异步

    摘要:异步请求线程在在连接后是通过浏览器新开一个线程请求将检测到状态变更时,如果设置有回调函数,异步线程就产生状态变更事件,将这个回调再放入事件循环队列中。 基础:浏览器 -- 多进程,每个tab页独立一个浏览器渲染进程(浏览器内核) 每个浏览器渲染进程是多线程的,主要包括:GUI渲染线程 JS引擎线程 也称为JS内核,负责处理Javascript脚本程序。(例如V8引擎) JS引擎线程负...

    junnplus 评论0 收藏0
  • 漫谈promise使场景

    摘要:能帮我们解决什么痛点实现异步执行,在未出现前,我们通常是使用嵌套的回调函数来解决的。那么,接下来我们看一下使用的实例可以传入两个参数表示两个状态的回调函数,第一个是,必选参数第二个是,可选参数的方便之处。 深入理解promise 对于现在的前端同学来说你不同promise你都不好意思出门了。对于前端同学来说promise已经成为了我们的必备技能。 那么,下面我们就来说一说promise...

    刘德刚 评论0 收藏0

发表评论

0条评论

DobbyKim

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<