码迷,mamicode.com
首页 > 其他好文 > 详细

解决for循环中异步请求顺序不一致的问题

时间:2020-01-18 21:30:22      阅读:139      评论:0      收藏:0      [点我收藏+]

标签:color   class   let   事件队列   mis   col   结果   reject   实例   

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 })

解决for循环中异步请求顺序不一致的问题

标签:color   class   let   事件队列   mis   col   结果   reject   实例   

原文地址:https://www.cnblogs.com/mo3408/p/12210159.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!