今天遇到一个需求就是，需要在for循环中，进行axios异步请求。一般这个这个时候就遇到两个问题
- 因为你的请求是在for循环中，而且又是异步的请求所以，请求出来的数据顺序错乱
- 还有就是在for里等所有的异步请求完成之后，再去处理数据。这时你就会发现。它是先走了异步请求下边的代码，因为这个是线程问题，在一个就是异步的，它不会等着你完成请求之后再去执行。因为JS运行在浏览器中，是单线程的
for (let i = 0; i < 5; i++) {
setTimeout(function () {//这里一般是axios请求现在模仿异步看一下打印的结果
console.log(i)
}, Math.random() * 3000)
}
let promiseList = []
for (let i = 0; i < 5; i++) {
//promiseLis这里要放到push数组里，原因是 如果用变量。一直就是最后一个，或者不用push的话，也可以用闭包的形式来
promiseList.push(new Promise((resolve, reject) => {
setTimeout(() => {
resolve(i) // 如果想要返回多个数据resolve([v,i])
}, Math.random() * 3000);
}))
}
//放到循环外边 因为rspList是一个数组
Promise.all(promiseList).then((rspList) => {
rspList.map((val) => {
console.log(val);
});
})
image.png
当时你也可以用递归去实现。但递归影响运行速度，因为它不是并发的。
如果在所有异步请求完成之后再去处理数据
let promiseList = []
for (let i = 0; i < 5; i++) {
promiseList.push(new Promise((resolve, reject) => {
setTimeout(() => {
resolve(i)
}, Math.random() * 3000);
}));
}
Promise.all(promiseList).then((rspList) => {//这个也可以接收多个Promiseall([promiseList,promiseList2])
rspList.map((val) => {
console.log(val);//依次输出0-4
});
}).then(() => {
console.log("所有异步请求已经完成")
})
image.png
