map遍历数组时正确使用 async 与 await

最新推荐文章于 2024-02-18 18:14:40 发布

我是噢噢噢

最新推荐文章于 2024-02-18 18:14:40 发布

阅读量3.3k

点赞数 3

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_43558459/article/details/117535156

版权

JavaScript 专栏收录该内容

15 篇文章

订阅专栏

博客围绕JavaScript处理数据时遇到的问题展开。处理数据需用iXXXd去表中查询，查询为异步操作，返回数据里newMatchInfo一直为空。经分析是异步原因，因async函数返回Promise，map返回Promise数组，需等所有Promise处理完再赋值，最终用await Promise.all解决。

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

问题背景

在处理数据的时候，经常需要拿到一个iXXXd再去XXX表里面查询，但是查询是异步操作。返回的数据中，newMatchInfo一直是空的

let newMatchInfo = matchInfo.map(async item => {
      item.competionName = await acceptableMatchModel.query(`select competitionName from tb_competition where competitionId = '${item.competitionId}'`);
      item.placeInfo = await acceptableMatchModel.query(`select * from tb_data_dictionary where itemKey = '${item.palceId}'`);
      return item;
    });
    return this.success({
      data: newMatchInfo,
      pageNo,
      pageSize,
      total: total[0].totalNum
    });

分析与解决

分别打印item和newMatchInfo
发现item里面有数值，但是newMatchInfo里面没有，怀疑是异步原因
分析：
因为async函数返回的是一个Promise，所以map返回的是Promise数组。我必须等到所有Promise得到处理之后再进行赋值操作。
解决:
通过await Promise.all(arrayOfPromises)解决

最终代码

let newMatchInfo = matchInfo.map(async item => {
      item.competionName = await acceptableMatchModel.query(`select competitionName from tb_competition where competitionId = '${item.competitionId}'`);
      item.placeInfo = await acceptableMatchModel.query(`select * from tb_data_dictionary where itemKey = '${item.palceId}'`);
      return item;
    });
    newMatchInfo = await Promise.all(newMatchInfo);
    return this.success({
      data: newMatchInfo,
      pageNo,
      pageSize,
      total: total[0].totalNum
    });