解決for循環中異步請求順序不一致的問題


for循環,再把循環出來的ID再進行二次請求

這就導致一個問題

請求結果返回順序不一致

原因:異步請求會把回調事件放入微任務事件隊列,宏任務執行完畢再執行微任務,具體參考事件隊列機制

解決方法:

通過map方法進行循環請求

將異步請求方法封裝起來,返回一個promise

這樣將會返回一個具有多個promise的數組

通過promise.all()方法把promise包裝成一個新的promise實例

 1 // 通過Promise把所有的異步請求放進事件隊列中
 2 
 3 getInfo(item ,index) {
 4 
 5     const ms = 1000 * Math.ceil(Math.random() * 3)
 6 
 7     return new Promise((resolve,reject) => {
 8 
 9         setTimeout(() => {
10 
11            axios.get(id).then((result) => {
12 
13                resolve(result)
14 
15            })
16 
17         }, ms)
18 
19     })
20 
21 }
22 
23  
24 
25 // 返回多個promise
26 
27 let promise = arr.map((item,index) = > {
28 
29     arr.forEach((item, index) => {
30 
31         return getInfo(item, index)
32 
33     })
34 
35 })
36 
37 // 對返回的promise數組進行操作
38 
39 Peomise.all(promise).then((allData) => {
40 
41     arr.forEach((item, index) => {
42 
43         // ......
44 
45     })
46 
47 })


免責聲明!

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



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