• 关于js中循环遍历中顺序执行多个嵌套ajax的问题


    就是业务上需要完成一个功能,这个功能需要依次调用四个接口,后面接口的参数都依赖于前一个接口的返回值。

    类似这样:

     1 var objArr = "从其他逻辑获得";
     2 for(var n in objArr){
     3     $.ajax({
     4         type : 'post',
     5         url : '../xxx/xxxx',
     6         data : {param:objArr[n].xxx},
     7         async : false,
     8         secureuri : false,
     9         contentType : "application/json;charset=utf-8",
    10         dataType : 'JSON',
    11         success : function(data) {
    12 
    13             $.ajax({
    14                 type : 'post',
    15                 url : '../xxx/xxxx',
    16                 data : {param:data.xxx},
    17                 async : false,
    18                 secureuri : false,
    19                 contentType : "application/json;charset=utf-8",
    20                 dataType : 'JSON',
    21                 success : function(data1) {
    22 
    23                     $.ajax({
    24                         type : 'post',
    25                         url : '../xxx/xxxx',
    26                         data : {param:data1.xxx},
    27                         async : false,
    28                         secureuri : false,
    29                         contentType : "application/json;charset=utf-8",
    30                         dataType : 'JSON',
    31                         success : function(data2) {
    32 
    33                             $.ajax({
    34                                 type : 'post',
    35                                 url : '../xxx/xxxx',
    36                                 data : {param:data2.xxx},
    37                                 async : false,
    38                                 secureuri : false,
    39                                 contentType : "application/json;charset=utf-8",
    40                                 dataType : 'JSON',
    41                                 success : function(data3) {
    42 
    43                                     if(n = data3.length){
    44                                         alert("全部完成");
    45                                     }
    46                                     
    47                                 }
    48                             });
    49                             
    50                         }
    51                     });
    52                     
    53                 }
    54             });
    55             
    56         }
    57     });
    58 }

    但是事实不与愿为,因为什么呢?这个js里的循环,每次都是自顾自的走,它不等ajax执行好走完到success代码,就继续循环下一条数据了,这样数据就全乱了。

    后来,想到试试ajax里async这个属性,async默认是true,即为异步方式,那我改为false同步行不行呢?答案是也是不行,阻塞在那了。

    然后把每一个ajax都写一个方法,调相应的方法,测试也是无效。

    最后搞半天换了个思路,不是从技术上解决的,这个问题的关键是循环数据的时候,ajax的数据是依赖等待返回的,只要涉及到遍历循环,那这个问题就肯定存在。

    那能不能避开循环呢?想到一个方法,这四个ajax分别写四个方法,这四个方法都有固定的两个参数,一个是我们要使用的数据objArr,一个是一个计数器num,这样

     1 var objArr = "从其他逻辑获得";
     2 for(var n in objArr){
     3     xxxA(objArr,0);
     4 }
     5 
     6 function xxxA(objArr, num){
     7     $.ajax({
     8         type : 'post',
     9         url : '../xxx/xxxx',
    10         data : {param:objArr[num].xxx},
    11         async : false,
    12         secureuri : false,
    13         contentType : "application/json;charset=utf-8",
    14         dataType : 'JSON',
    15         success : function(data) {
    16 
    17             xxxB(objArr, num, data);
    18             
    19         }
    20     });
    21 }
    22 
    23 function xxxB(objArr, num, back){
    24     $.ajax({
    25         type : 'post',
    26         url : '../xxx/xxxx',
    27         data : {param:back.xxx},
    28         async : false,
    29         secureuri : false,
    30         contentType : "application/json;charset=utf-8",
    31         dataType : 'JSON',
    32         success : function(data1) {
    33 
    34             xxxC(objArr, num, data1);
    35             
    36         }
    37     });
    38 }
    39 
    40 function xxxC(objArr, num, back){
    41     $.ajax({
    42         type : 'post',
    43         url : '../xxx/xxxx',
    44         data : {param:back.xxx},
    45         async : false,
    46         secureuri : false,
    47         contentType : "application/json;charset=utf-8",
    48         dataType : 'JSON',
    49         success : function(data2) {
    50 
    51             xxxC(objArr, num, data2);
    52             
    53         }
    54     });
    55 }
    56 
    57 function xxxD(objArr, num, back){
    58     $.ajax({
    59         type : 'post',
    60         url : '../xxx/xxxx',
    61         data : {param:back.xxx},
    62         async : false,
    63         secureuri : false,
    64         contentType : "application/json;charset=utf-8",
    65         dataType : 'JSON',
    66         success : function(data3) {
    67 
    68             if(num = arrObj.length-1){
    69                 alert("全部完成");
    70             }else{
    71                 xxxA(objArr,num+1);
    72             }
    73             
    74         }
    75     });
    76 }

    它的大致思路是 分为四个方法,每个方法都有两个参数,一个要遍历的数据,一个计数器,BCD三个方法还有个参数,就是上一个方法返回的数据,  先调A,A里面再调B,B里面再调C,C里面再调D,D里面判断一下,如果num = arrObj.length-1就代表全部走完,没有就继续再调A,依次循环。

  • 相关阅读:
    云原生时代已来,计算机教育如何因「云」而变?
    征文投稿丨在轻量应用服务器上部署SpringBoot项目
    无影云电脑支持企业快速实现居家办公
    投稿开奖丨轻量应用服务器征文活动(2月)奖励公布
    使用云服务器ECS搭建DoH服务的开发实践
    深度解读「无影云电脑远程办公解决方案」
    三步搞定android应用底部导航栏
    问题总结211118至220208
    在centos5中配置yum源
    Android开发环境搭建(各种问题,各种解决)
  • 原文地址:https://www.cnblogs.com/shamo89/p/6661543.html
Copyright © 2020-2023  润新知