JS 的forEach、map和async函数

今天需要在成图前从数据库依次获取各点的数据，结果发现直接用数组的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)

输出效果一样