for循环中异步请求问题promise

今天遇到一个需求就是，需要在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