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

时间:2023-11-21 11:45:02

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

类似这样:

 var objArr = "从其他逻辑获得";
for(var n in objArr){
$.ajax({
type : 'post',
url : '../xxx/xxxx',
data : {param:objArr[n].xxx},
async : false,
secureuri : false,
contentType : "application/json;charset=utf-8",
dataType : 'JSON',
success : function(data) { $.ajax({
type : 'post',
url : '../xxx/xxxx',
data : {param:data.xxx},
async : false,
secureuri : false,
contentType : "application/json;charset=utf-8",
dataType : 'JSON',
success : function(data1) { $.ajax({
type : 'post',
url : '../xxx/xxxx',
data : {param:data1.xxx},
async : false,
secureuri : false,
contentType : "application/json;charset=utf-8",
dataType : 'JSON',
success : function(data2) { $.ajax({
type : 'post',
url : '../xxx/xxxx',
data : {param:data2.xxx},
async : false,
secureuri : false,
contentType : "application/json;charset=utf-8",
dataType : 'JSON',
success : function(data3) { if(n = data3.length){
alert("全部完成");
} }
}); }
}); }
}); }
});
}

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

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

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

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

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

 var objArr = "从其他逻辑获得";
for(var n in objArr){
xxxA(objArr,0);
} function xxxA(objArr, num){
$.ajax({
type : 'post',
url : '../xxx/xxxx',
data : {param:objArr[num].xxx},
async : false,
secureuri : false,
contentType : "application/json;charset=utf-8",
dataType : 'JSON',
success : function(data) { xxxB(objArr, num, data); }
});
} function xxxB(objArr, num, back){
$.ajax({
type : 'post',
url : '../xxx/xxxx',
data : {param:back.xxx},
async : false,
secureuri : false,
contentType : "application/json;charset=utf-8",
dataType : 'JSON',
success : function(data1) { xxxC(objArr, num, data1); }
});
} function xxxC(objArr, num, back){
$.ajax({
type : 'post',
url : '../xxx/xxxx',
data : {param:back.xxx},
async : false,
secureuri : false,
contentType : "application/json;charset=utf-8",
dataType : 'JSON',
success : function(data2) { xxxC(objArr, num, data2); }
});
} function xxxD(objArr, num, back){
$.ajax({
type : 'post',
url : '../xxx/xxxx',
data : {param:back.xxx},
async : false,
secureuri : false,
contentType : "application/json;charset=utf-8",
dataType : 'JSON',
success : function(data3) { if(num = arrObj.length-1){
69 alert("全部完成");
70 }else{
71 xxxA(objArr,num+1);
72 } }
});
}

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