JS 的forEach、map和async函数-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41827018/article/details/90673140

本文探讨了在JavaScript中使用forEach和map处理包含await异步操作时遇到的问题。当在这些循环中使用await时，它们并不会等待异步任务完成，而是并发执行。解决方法包括改用for...of循环或者利用Promise.all将所有异步任务一起执行，确保正确顺序获取数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天需要在成图前从数据库依次获取各点的数据，结果发现直接用数组的forEach和map都无效。
代码如下：

//服务器异步方法总是最后？
    configEchart=async()=>{
      const {stations} = this.state
      let options = []
      await stations.map(async(item,index)=>{
        console.log(item,index)
        await WorkSiteApi.getMeasuringData(item.measuringPointId).then((res)=>{
          console.log(res)
                          options.push(
                          {
                            type: 'line',
                            data: res.data
                          }
                        )
                      })
        
      })
      console.log('options',options)
      await this.setState({options:options})
    }

调试台输出结果如下：
在这里插入图片描述
从输出结果来看，map和forEach会并发执行里面的await异步函数，也就是说会把同步任务先执行完，然后再去执行任务队列里的异步任务。
解决方法就是用for函数:

configEchart=async()=>{
      const {stations} = this.state
      let options = []
      for(let item of stations){
        let res = await WorkSiteApi.getMeasuringData(item.measuringPointId)
        options.push(
          {
            type: 'line',
            data: res.data
          }
        )
      }
      console.log('options',options)

数据正常获取：
在这里插入图片描述
或者换一种写法。应用promise.all将所有异步一起执行

let promises = stations.map(async(item)=>{
       await WorkSiteApi.getMeasuringData(item.measuringPointId).then((res)=>{
        options.push(
              {
                type: 'line',
                data: res.data.map(i=>i.accDeformationZ)
              }
            )
       })
      })
      await Promise.all(promises)
      console.log('options',options)

输出效果一样
在这里插入图片描述