Promise.all 配合 async/await 可并发拉取多个异步请求，需先封装返回 Promise 的 async 函数，再传入 Promise 数组；若需容错则改用 Promise.allSettled。
用 Promise.all 配合 async/await 实现并发拉取，核心是把多个异步请求（如 fetch）包装成 Promise 数组，再用 Promise.all 一次性等待全部完成。
先写好单个异步请求函数
每个请求都应是返回 Promise 的 async 函数，便于统一管理错误和结果：
async function fetchUser(id) {
const res = await fetch(`/api/users/${id}`);
if (!res.ok) throw new Error(`User ${id} not found`);
return res.json();
}
async function fetchPost(id) {
const res = await fetch(`/api/posts/${id}`);
if (!res.ok) throw new Error(`Post ${id} failed`);
return res.json();
}
用 Promise.all 并发触发多个请求
直接传入 Promise 数组，await Promise.all([...]) 会等待所有完成，返回结果数组（顺序与输入一致）：
async function loadUserData() {
try {
const [user, post, profile] = await Promise.all([
fetchUser(123),
fetchPost(456),
fetchUser(789) // 假设这是 profile 数据
]);
console.log({ user, post, profile });
} catch (err) {
console.error('某一个请求失败了：', err.message);
}
}
注意：Promise.all 是“全成功才成功”，任一 Promise reject，整个就立刻 reject —— 不会等其他完成。
立即学习“Java免费学习笔记（深入）”；
需要容错？用 Promise.allSettled
如果某个请求失败不影响其他，改用 Promise.allSettled：
const results = await Promise.allSettled([
fetchUser(123),
fetchPost(456),
fetchUser(999) // 假设这个 ID 不存在
]);
results.forEach((result, index) => {
if (result.status === 'fulfilled') {
console.log(`第 ${index} 个成功：`, result.value);
} else {
console.warn(`第 ${index} 个失败：`, result.reason.message);
}
});
常见坑和优化建议
- 别在
Promise.all里直接写await fetch(...)，会导致串行执行 —— 要先构造 Promise，再一起 await - 避免无节制并发：大量请求可能触发浏览器限制或服务端限流，可配合
Promise.all分批（如每 5 个一组） - 接口地址动态生成时，用
map构造 Promise 数组更清晰：ids.map(id => fetchUser(id)) - 需要带 loading 状态时，可在调用前设标志位，
finally中关闭
