如何将数组.map()方法与Promise结合实现异步数据处理？

我完全懂你的困扰——你想要遍历数组里的每个元素，为每个元素发起一个异步请求（这里用Promise模拟fetch），把请求结果和原元素结合后得到一个处理好的普通数组，比如从['a', 'b']得到['ax', 'bx']，结果却得到了一堆Promise对象，对吧？

为什么会出现这个问题？ #

因为你直接用map遍历数组调用异步函数时，每个异步函数（你的p）返回的都是Promise实例，而不是它解析后的值。所以map返回的数组自然全是Promise，而不是你期望的处理后的值。

解决方案：用Promise.all配合async/await #

要等到所有异步请求都完成，并且拿到它们的解析结果，我们可以用Promise.all()来批量等待所有Promise完成，再结合async/await让代码更易读。

先看完整示例代码：

// 模拟你的异步请求函数（对应实际场景的Web服务调用）
const p = (item) => {
  return new Promise(resolve => {
    // 模拟异步延迟
    setTimeout(() => {
      resolve(item + 'x');
    }, 100);
  });
};

// 处理数组的异步函数
async function processOriginalArray(arr) {
  // 对数组每个元素发起异步请求，得到Promise数组
  const pendingPromises = arr.map(item => p(item));
  // 等待所有Promise都解析完成，拿到结果数组
  const processedArray = await Promise.all(pendingPromises);
  return processedArray;
}

// 调用示例
const originalArray = ['a', 'b'];
processOriginalArray(originalArray).then(finalResult => {
  console.log(finalResult); // 输出: ['ax', 'bx']
});

更简洁的写法 #

你也可以把map和Promise.all直接结合，让代码更紧凑：

async function processOriginalArray(arr) {
  return await Promise.all(arr.map(item => p(item)));
}

补充：处理可能的失败场景 #

如果你的异步请求有可能失败，Promise.all()会在第一个Promise失败时就抛出错误。如果需要保留成功的结果并处理失败的情况，可以改用Promise.allSettled()：

async function processOriginalArray(arr) {
  const settledResults = await Promise.allSettled(arr.map(item => p(item)));
  // 过滤出成功的结果
  const successfulResults = settledResults
    .filter(result => result.status === 'fulfilled')
    .map(result => result.value);
  return successfulResults;
}

这样就能确保你拿到的是所有成功处理后的元素数组啦。

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