使用 map 遍历数组触发异步操作时，必须确保每个回调显式返回 Promise（如 fetch 或 async 函数），再用 Promise.all 并发执行；若漏 return 会得到 undefined 数组，而 await 在 map 内会导致串行执行。
当你用 map 遍历一个数组、每个元素触发一个异步操作（比如 API 请求），并希望等所有异步操作都完成后再统一处理结果，就需要让 map 返回一个 Promise 数组，再用 Promise.all 包裹执行。
确保 map 返回的是 Promise 实例
map 本身只是同步遍历，它不会自动等待异步操作。关键在于：每个回调函数必须显式返回一个 Promise（比如 fetch、async 函数、或 new Promise）。
- ✅ 正确：返回
fetch(url)（它本身就是 Promise） - ✅ 正确：返回
asyncFn(item)（async 函数返回 Promise） - ❌ 错误：只写
await asyncFn(item)却不 return —— 这会让 map 返回undefined
常见写法示例
假设你要批量请求用户信息：
const userIds = [1, 2, 3];
<p>// ✅ 正确：map 返回 Promise，Promise.all 等全部 resolve
const promises = userIds.map(id =>
fetch(<code>/api/users/${id}</code>)
.then(res => res.json())
);</p><p>Promise.all(promises)
.then(users => console.log(users))
.catch(err => console.error('某一个请求失败了', err));
或者用 async/await 风格（注意仍要 return Promise）：
立即学习“Java免费学习笔记（深入）”；
const loadUser = async (id) => {
const res = await fetch(`/api/users/${id}`);
return res.json();
};
<p>const promises = userIds.map(id => loadUser(id)); // ✅ loadUser 是 async 函数，返回 Promise
Promise.all(promises).then(/<em> ... </em>/);
注意 Promise.all 的失败行为
Promise.all 是“全成功才成功”，只要其中一个 Promise reject，整个就立刻 reject，不会等其余完成。如果你需要不管成败都拿到所有结果，改用 Promise.allSettled：
Promise.allSettled(promises).then(results => {
results.forEach((result, i) => {
if (result.status === 'fulfilled') {
console.log(`用户 ${userIds[i]} 加载成功:`, result.value);
} else {
console.log(`用户 ${userIds[i]} 加载失败:`, result.reason);
}
});
});
避免常见坑
- 不要在 map 里 await：这会让遍历变成串行，失去并发优势
-
别漏掉 return：尤其在箭头函数中，
id => { doAsync(); }不返回任何值 → 得到[undefined, undefined, ...] -
错误处理要分层：可以在每个 Promise 内部用
.catch()挡住错误，使其变为 resolved（配合Promise.all使用时需谨慎）
