当前位置: 首页>后端>正文

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);
  });
})
for循环中异步请求问题promise,第1张

当时你也可以用递归去实现。但递归影响运行速度,因为它不是并发的。
如果在所有异步请求完成之后再去处理数据

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("所有异步请求已经完成")
})
for循环中异步请求问题promise,第2张

https://www.xamrdz.com/backend/3yb1924137.html

相关文章: