本文介绍在 javascript 中使用 promise.all 等待多个异步 fetch 请求全部完成的正确方法，避免因忽略 promise 链而提前返回空或不完整数据的问题。
本文介绍在 javascript 中使用 promise.all 等待多个异步 fetch 请求全部完成的正确方法，避免因忽略 promise 链而提前返回空或不完整数据的问题。
在实际开发中，当需要基于嵌套循环发起大量 fetch 请求（例如遍历日期数组、两个列表组合生成参数）时，一个常见误区是：将 fetch 调用直接写在循环内却未显式等待其完成。由于 fetch 返回的是 Promise，而 .then() 链本身不阻塞执行，原代码中 await dateArray?.map(...) 实际上并未等待内部 fetch 完成——map 仅返回一个（被忽略的）Promise 数组，且未用 Promise.all 统一 await，导致后续 logger.info('2: return response') 总是先执行，而 var1/var2 的填充仍在后台异步进行。
✅ 正确做法是：显式收集所有 fetch Promise，并统一 await 其全部 resolve。以下是优化后的结构化实现：
async function fetchData() {
const var1 = [];
const var2 = [];
const fetchPromises = []; // 用于收集所有 fetch Promise
// 注意：map 不应被 await —— 它只负责构建 Promise 数组
dateArray?.forEach((day) => {
for (const o of myFirstList) {
for (const d of mySecondList) {
// 构建每个请求的 Promise 链，并推入数组
const promise = fetch(`https://api.example.com/data?day=${day}&o=${o}&d=${d}`)
.then(resp => {
if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
return resp.json();
})
.then(data => {
const f = manipulateResponse(data);
logger.info('1: manipulated data');
var1.push(f.data1);
var2.push(f.data2);
})
.catch(err => {
logger.error('Fetch failed:', err);
// 可选择抛出或静默处理，视业务而定
});
fetchPromises.push(promise);
}
}
});
// ✅ 关键：等待所有 fetch 完全结束（包括 .then 内部逻辑）
await Promise.all(fetchPromises);
logger.info('2: return response');
return { var1, var2 };
}
? 关键要点说明：
- Promise.all(fetchPromises) 会等待数组中每一个 Promise 都 resolve（或任意一个 reject），确保 var1/var2 已被所有成功响应填充完毕；
- 使用 forEach 替代 map 更语义清晰（此处无需返回新数组）；
- 添加 HTTP 错误检查（resp.ok）和 catch 块，避免单个失败请求导致整个 Promise.all 拒绝而中断流程（若需容错，可改用 Promise.allSettled）；
- var1/var2 声明为 const 更安全（引用不变），且避免在异步回调中意外重赋值；
- URL 参数应做适当编码（如 encodeURIComponent(day)），防止特殊字符引发请求错误。
⚠️ 注意：若请求量极大（如数百次），需考虑节流、并发控制（如使用 p-limit 库）或服务端聚合接口，避免浏览器限制或服务端压力过大。
通过以上改造，函数将严格保证：所有数据处理完成 → 日志输出 → 返回最终结果，彻底解决同步性问题。
