工作中遇到一个问题
for循环,再把循环出来的ID再进行二次请求
这就导致一个问题
请求结果返回顺序不一致
原因:异步请求会把回调事件放入微任务事件队列,宏任务执行完毕再执行微任务,具体参考事件队列机制
解决方法:
通过map方法进行循环请求
将异步请求方法封装起来,返回一个promise
这样将会返回一个具有多个promise的数组
通过promise.all()方法把promise包装成一个新的promise实例
1 // 通过Promise把所有的异步请求放进事件队列中 2 getInfo(item ,index) { 3 const ms = 1000 * Math.ceil(Math.random() * 3) 4 return new Promise((resolve,reject) => { 5 setTimeout(() => { 6 axios.get(id).then((result) => { 7 resolve(result) 8 }) 9 }, ms) 10 }) 11 } 12 13 // 返回多个promise 14 let promise = arr.map((item,index) = > { 15 arr.forEach((item, index) => { 16 return getInfo(item, index) 17 }) 18 }) 19 // 对返回的promise数组进行操作 20 Peomise.all(promise).then((allData) => { 21 arr.forEach((item, index) => { 22 // ...... 23 }) 24 })