關於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,依次循環。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM