为何得到Promise { <pending> }？JavaScript异步问题咨询

原因分析 #

async函数的返回值本质就是Promise。你在map中传入的是async回调函数，map会同步遍历数组，把每个回调返回的Promise直接收集到数组里，不会等待这些Promise完成。哪怕你在回调内部用了await，也只是让回调自身等待异步操作结果，但map本身不会暂停等待，所以最终得到的是一组处于pending状态的Promise数组。

解决方案 #

要获取所有异步操作的最终结果，必须用Promise.all()等待数组中所有Promise完成。示例代码如下：

// 封装在async函数中执行（因为await必须在async函数内使用）
async function fetchSections() {
  // 用Promise.all等待所有异步请求完成
  const foundedSectionsList = await Promise.all(
    sections.map(sectionId => sectionsRepository.getSectionById(sectionId))
  );
  console.log(foundedSectionsList); // 这里输出的是实际的结果数组
}

fetchSections();

补充说明 #

如果一定要在map的回调里写async/await，写法也可以，但属于冗余操作——因为sectionsRepository.getSectionById(sectionId)本身就返回Promise，直接返回即可，不需要额外用async包裹。冗余写法示例：

async function fetchSections() {
  const foundedSectionsList = await Promise.all(
    sections.map(async (sectionId) => {
      return await sectionsRepository.getSectionById(sectionId);
    })
  );
  console.log(foundedSectionsList);
}

两种写法效果完全一致，但前者更简洁高效。

内容的提问来源于stack exchange，提问作者isadfrn