Array.prototype.map() 返回 Promise 数组而非结果数组，需用 Promise.all 并行等待或 for...of 串行执行；常见错误包括直接 await map 结果或误用 forEach。
在 JavaScript 中，Array.prototype.map() 本身是同步方法，它不会等待 async 回调函数内部的 await 完成，而是直接返回一个包含 Promise 对象的数组。所以“正确处理”的核心是：**不要期望 map 自动并行/串行等待异步结果，而要显式地等待这些 Promise**。
问题本质：map 返回的是 Promise 数组，不是结果数组
当你写：
const urls = ['a.com', 'b.com', 'c.com'];
const promises = urls.map(async url => {
const res = await fetch(url);
return res.json();
});
console.log(promises); // [Promise, Promise, Promise] —— 不是数据！
这没有报错，但 promises 是三个待决的 Promise，不是你想要的解析后的 JSON 数据。直接使用 promises[0] 会得到一个 Promise，不是结果。
方案一：用 Promise.all 并行执行（最常用）
如果你希望所有请求同时发起、等全部完成后再继续，就用 Promise.all() 包裹 map 的结果：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
- 保持并发，效率高
- 任意一个失败，整个
Promise.all就 reject - 结果顺序与原数组一致
const urls = ['a.com', 'b.com', 'c.com'];
// ✅ 正确：先 map 出 Promise 数组，再用 Promise.all 等待全部完成
const results = await Promise.all(
urls.map(async url => {
const res = await fetch(url);
return res.json();
})
);
console.log(results); // [{...}, {...}, {...}] —— 实际数据
方案二：用 for...of 串行执行（需按序、防压垮服务）
如果接口有调用频率限制，或依赖上一步结果，就得串行。此时不该用 map，改用 for...of 循环 + await：
- 每次只发一个请求，自然按序执行
- 可加延时、错误重试、中断逻辑
- 性能低，但可控性强
const urls = ['a.com', 'b.com', 'c.com'];
const results = [];
for (const url of urls) {
try {
const res = await fetch(url);
const data = await res.json();
results.push(data);
} catch (err) {
console.error(`Failed on ${url}:`, err);
results.push(null); // 或跳过、抛出等
}
}
console.log(results); // 按序的结果数组
方案三：用 reduce 实现串行（函数式风格，少用）
如果坚持函数式写法，可用 reduce 累积 Promise 链：
const urls = ['a.com', 'b.com', 'c.com'];
const results = await urls.reduce(async (accP, url) => {
const acc = await accP;
const res = await fetch(url);
const data = await res.json();
return [...acc, data];
}, Promise.resolve([]));
console.log(results); // 同样是按序结果
⚠️ 注意：这种写法可读性差、调试难，日常开发中不推荐替代 for...of。
常见错误避坑
-
❌ 不要直接在 map 里 await 赋值：
urls.map(async u => await fetch(u))还是返回 Promise 数组，没解决根本问题 -
❌ 不要误用 forEach：
urls.forEach(async u => { await fetch(u); })是完全失控的“火球式”并发，无法等待、无法捕获结果 - ✅ 记住口诀：map 造 Promise，Promise.all 等结果；要串行，就用 for 循环
