关于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,依次循环。