`
kstgjfk403
  • 浏览: 30568 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

多ajax请求顺序执行

阅读更多

       工作中有时间碰到多个ajax请求,需要按照顺序进行数据请求且保证数据是按照请求的顺序有序返回。所以需要对请求进行包装处理。 jquery自带的case when方式仅能保证请求是按顺序发出的,但不能保证请求的数据按顺序返回。

具体处理方式如下:

1、创建一个存放ajax请求的数组,

2、创建一个执行ajax请求的函数,在函数内执行数组中第一个ajax函数,在请求返回后将该ajax函数删除,然后判断数组的长度,若数组长度大于零,表示还有请求没有完成,继续执行该ajax函数。实际上是利用递归原理来处理。

例:

var categorieList = [
        {
            categorieId: 1,
            id: 11151, //测试用
            type: "技术"
        },{
            categorieId: 2,
            id: 11164, //测试用
            type: "能力"
        },{
            categorieId: 3,
            id: 11146, //测试用
            type: "产品"
        }
    ];
    if( typeof(result.label) != "undefined" && !isBlank(result.label) ){
        var ajaxes = []; //用于存储参数对象的队列
        for(var i=0; i< categorieList.length; i++){
            ajaxes.push( {categorieId: categorieList[i].categorieId, type: categorieList[i].type, result: result } );
        }

   创建执行ajax请求的函数:

var  executeAjax = function(){
            if(ajaxes.length < 1){
                return;
            }
            var params = ajaxes[0];
            $.ajax({
                 type:  .....
                 success: function(response){
                       ...
                       //删除队列中的第一个请求
                    ajaxes.shift();
                    //如果队列中还有请求,就接着递归执行executeAjax函数,直到队列为空
                    if( ajaxes.length > 0){
                        executeAjax();
                    }
                 }
            });
};
executeAjax(); //执行函数请求。

 

 

1
0
分享到:
评论

相关推荐

    ajax请求之返回数据的顺序问题分析

    本文实例分析了ajax请求之返回数据的顺序问题。分享给大家供大家参考,具体如下: ajax请求一个url,php后端处理后,数组为如下格式: 代码如下:$a = array( ‘-1’=&gt; 10 ,’-3′ =&gt; 2, ‘0’ =&gt; ‘5’ ,’-2′ =&gt; ...

    解决Ajax 发送多个请求引发的并发问题

    1. 同步请求:将Ajax请求设置为同步(async: false),这样可以确保请求按照发出的顺序执行。但这种方法会导致浏览器阻塞,直到所有请求完成,可能导致页面无响应。 2. 请求队列:手动管理请求队列,当有新的请求时...

    关于多个Ajax请求执行返回先后的问题示例探讨

    需要执行两个以上的Ajax请求,但是可能要顾虑到Ajax请求执行的先后顺序,有时候Ajax请求顺序出问题,会导致各种问题 例如现在有两个ajax事件,分别为ajax1 ,ajax2 一个叫做main的方法调用执行入口 1. function ...

    多个ajax同时进行

    这显著提高了用户界面的响应速度,特别是在需要加载大量数据或执行多个独立任务时。 2. **Promise和async/await**:随着ES6的推出,Promise和async/await语法使得并发管理变得更加优雅。你可以使用Promise.all()来...

    jquery $.ajax各个事件执行顺序

    这个事件通常用于执行一些需要在所有Ajax请求开始前进行的初始化操作,例如显示加载指示器。在jQuery中,它适用于所有的Ajax请求。 2. beforeSend(局部事件) beforeSend事件是一个局部事件,它在请求发送到服务器...

    jquery中ajax函数执行顺序问题之如何设置同步

    然而,由于其异步的特性,开发者有时候需要将AJAX请求同步执行,以确保代码执行顺序符合逻辑。在本主题中,我们将探讨在使用jQuery时,如何设置AJAX请求为同步执行。 首先,需要理解AJAX请求的默认执行模式是异步的...

    jsp+ajax发送GET请求的方法

    为了保证代码的执行顺序,通常在页面完全加载完成后才会执行JavaScript代码,以确保DOM元素已经加载,从而能够正确地绑定事件处理器。 在整个过程中,我们需要注意的是Ajax请求是异步进行的,它不会导致浏览器页面...

    AJAX请求队列实现

    AJAX请求队列实现主要讲解了如何管理多个异步AJAX请求,确保它们能够按照一定的顺序执行,以防止请求因执行时机冲突而被取消或丢失。在Web应用中,用户可能会在短时间内发起多个请求,这些请求可能是异步的。如果不...

    多ajax请求的各类解决方案(同步, 队列, cancel请求)

    第2种case 应用场景: 多个ajax请求,需要顺序执行,后一个ajax请求的执行参数是前一个ajax的结果。例如: 用户登录后我们发送一次请求得到用户的应用ID,然后利用应用ID发送一次请求得到具体的应用内容(例子虽然...

    ajax嵌套解决方式

    将外层的AJAX请求设置为同步模式(`async: false`),使得内层的AJAX请求能够按顺序执行,确保外层请求完全执行完毕后再进行下一步操作。 **示例代码**: ```javascript $.ajax({ cache: false, type: 'POST', url...

    Ajax请求内嵌套Ajax请求示例代码

    然而,在嵌套Ajax请求时,有时候需要强制Ajax同步执行,以确保请求顺序符合逻辑。在上面的示例中,通过设置`async: false`来实现同步请求。 5. **async参数**: 在Ajax请求中,`async`参数用于控制请求是异步执行...

    Jquery 一次处理多个ajax请求的代码

    知识点1:JQuery处理多个Ajax请求 在使用JQuery进行网页开发时,经常需要从服务器获取数据。通过Ajax方法可以实现异步加载服务器的数据。在旧版本的JQuery中,如果要同时处理多个Ajax请求,通常需要编写嵌套的回调...

    extjs对ajax的支持文档

    - Ext.Ajax也支持批量请求管理和队列控制,允许开发者组织和顺序执行多个Ajax请求。 8. **预处理和后处理**: - `beforeSend`: 在发送请求前执行的函数,可以取消请求。 - `loadFn`和`unloadFn`: 对于资源加载和...

    让火狐、谷歌支持Ajax

    这段代码确保了`XMLHttpRequest`对象能在各种浏览器环境下正确创建,为后续的Ajax请求奠定了基础。 ### 发起Ajax请求 一旦`XMLHttpRequest`对象被创建,就可以使用它来发起一个HTTP请求。在代码中,`startRequest`...

    ajaxQueue:ajax请求队列

    多个ajax请求相互依赖,必须有先后顺序。 多个请求被同时发送,只需要最后一个请求。 1.情况1-多个ajax请求同时发送,相互无依赖 ajaxQueue1文件夹 ajaxQueue-requireJS //为符合AMD规范的文件,可以直接作为...

    用Promise解决多个异步Ajax请求导致的代码嵌套问题(完美解决方案)

    通过Promise的链式调用,我们可以优雅地解决多个异步Ajax请求的顺序问题,同时避免了代码的嵌套。当请求数量增加时,这个模式仍然有效,只需要继续添加更多的`.then`即可。此外,Promise还支持并发执行和错误传播,...

    Jquery ajax执行顺序 返回自定义错误信息(实例讲解)

    3. 控制Ajax请求顺序:通过设置Ajax请求的async参数为false,可以控制Ajax请求按代码顺序同步执行。 4. 自定义错误处理:在Ajax请求中可以设置success和error回调函数。在error回调中,可以根据响应的状态码和返回的...

Global site tag (gtag.js) - Google Analytics