reqData(){ this.startLoading(); //获取分析结果数据 for (let i = 1; i { if(PromiseResult.status==="success"){ this.images.push(PromiseResult.image) this.positions.push(PromiseResult.position) } }).catch((error) => { // 处理错误 console.error(error); }); } catch (error) { console.error(`Error fetching data for value ${formattedValue}:`, error); } } console.log("数据请求成功"); this.endLoading(); },
需求:要等for循环中的异步任务所有完成才向下运行
![[前端异步]循环中所有异步任务完成才往下运行?](https://www.ciyundata.com/zb_users/upload/2024/05/20240511025436171536727654940.jpeg)
(图片来源网络,侵删)
使用 async/await 来等待所有异步任务完成后再执行后续代码
怎样使用嘞?配合Promise
![[前端异步]循环中所有异步任务完成才往下运行?](https://www.ciyundata.com/zb_users/upload/2024/05/20240511025436171536727638772.png)
(图片来源网络,侵删)
async reqData() { this.startLoading(); try { // 使用 Promise.all 来等待所有异步任务完成 await Promise.all( Array.from({ length: 24 }, (_, i) => { let formattedValue = (i + 1).toString().padStart(4, '0'); return this.requestData(formattedValue) .then((PromiseResult) => { if (PromiseResult.status === "success") { this.images.push(PromiseResult.image); this.positions.push(PromiseResult.position); } }) .catch((error) => { console.error(`Error fetching data for value ${formattedValue}:`, error); }); }) ); console.log("数据请求成功"); } catch (error) { console.error("Error fetching data:", error); } this.endLoading(); }
在此修改后的代码中,使用了 Promise.all 方法来等待所有的异步任务完成。它接受一个 Promise 数组作为参数,并返回一个新的 Promise,该 Promise 在所有输入的 Promise 都已解析或有一个被拒绝时解析。这样就能够确保所有异步任务都完成后再执行后续的代码逻辑。