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

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