为什么不能直接在 map 中使用 await？

2025-03-07 18:58:00·9 浏览·264 字·作者：dreamk·技术

map 的回调函数必须同步返回一个值。当你在 map 的回调函数中使用 async 关键字时，该函数会隐式地返回一个 Promise。但是，map 不会等待这个 Promise resolve，而是直接将 Promise 对象存储在新数组中。因此，你会得到一个包含 Promise 对象的数组，而不是包含异步操作结果的数组。

在 map 函数内部使用 await 时，最常用的方法是结合 Promise.all，它可以并发执行异步操作并返回所有结果。如果需要按顺序执行异步操作，则应使用 for...of 循环。封装 asyncMap 函数可以使代码更简洁易懂。理解 map 的同步特性以及 await 的异步特性是正确使用它们的关键。

async function processData(data) {
  const results = await Promise.all(
    data.map(async (item) => {
      // 在这里执行异步操作，例如 fetch
      const response = await fetch(`https://api.example.com/data/${item.id}`);
      const result = await response.json();
      return result;
    })
  );
  return results;
}
 
const data = [{ id: 1 }, { id: 2 }, { id: 3 }];
 
processData(data)
    .then((results) => {
    	console.log(results); // 所有异步操作完成后，results 包含所有结果
    })
    .catch((error) => {
    	console.error(error);
    });

如果你需要按顺序执行异步操作，而不是并发执行，可以使用 for...of 循环：

async function processDataSequentially(data) {
  const results = [];
  for (const item of data) {
    const response = await fetch(`https://api.example.com/data/${item.id}`);
    const result = await response.json();
    results.push(result);
  }
  return results;
}
 
// 使用方式与上面类似

为什么不能直接在 map 中使用 await？

评论区