本文介绍如何在使用 `promise.all` 并行处理多个 promise 时，既确保所有请求完成后再统一处理结果，又能为每个已解析的 promise 单独执行回调函数，并实现进度百分比实时反馈。
Promise.all 的核心特性是：只有当所有传入的 Promise 都 fulfilled（成功）时，它才返回一个包含全部结果的数组；若任一 Promise rejected（失败），则整个 Promise.all 立即 reject。因此，它本身不提供“逐个完成时触发”的机制——但我们可以巧妙组合原生 Promise 特性来同时满足「批量等待」和「单个进度/回调」两个需求。
✅ 正确方式：分离「进度监听」与「结果汇总」
关键在于：不要把回调逻辑塞进 Promise.all().then() 内部去“模拟逐个执行”，而应分别利用原始 Promise 链做进度通知，再用 Promise.all 做最终聚合。
以下是一个完整、健壮的实现示例：
function fetchData(url) { return fetch(url) .then(res => { if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`); return res.json(); // 或 res.text()，按需处理响应体 }); } const urls = [ 'https://jsonplaceholder.typicode.com/posts/1', 'https://jsonplaceholder.typicode.com/posts/2', 'https://jsonplaceholder.typicode.com/posts/3' ]; const promises = urls.map((url, index) => fetchData(url).then(data => ({ index, url, data, timestamp: Date.now() })) ); // ? Step 1：监听每个 Promise 的独立完成（用于进度） let resolvedCount = 0; const total = promises.length; promises.forEach(promise => { promise.then(() => { resolvedCount++; const progress = ((resolvedCount / total) * 100).toFixed(1); console.log(`✅ 进度: ${progress}% (${resolvedCount}/${total})`); }).catch(err => { console.warn(`⚠️ 请求失败（不中断整体）:`, err.message); }); }); // ? Step 2：Promise.all 等待全部成功，统一处理结果 Promise.all(promises) .then(results => { console.log('? 所有请求已完成，开始批量处理结果...'); results.forEach(({ index, url, data }) => { console.log(`[${index + 1}] ${url} →`, data.title || '(no title)'); // ✅ 在此处调用你的 callbackResolve 函数 callbackResolve({ index, url, data }); }); }) .catch(err => { console.error('❌ Promise.all 被拒绝（至少一个请求彻底失败）:', err); }); // 示例回调函数（请按实际业务替换） function callbackResolve({ index, url, data }) { // e.g. 更新 UI、存入缓存、触发事件等 console.log(`➡️ 已处理第 ${index + 1} 个响应:`, url); }⚠️ 注意事项与最佳实践
- 避免 .then(callbackResolve) 直接链在 fetchData() 上：这会导致回调在每个 Promise 解析时立即执行，与 Promise.all 的协调无关，且无法保证执行顺序或统一错误处理。
- 进度统计需独立维护计数器：Promise.all 不暴露中间状态，必须通过遍历原始 promises 数组并为其每个元素附加 .then() 来实现。
- 错误处理要分层：
- 单个请求失败时，.catch() 可记录警告但不应阻止其他 Promise 继续（除非业务强依赖全部成功）；
- Promise.all().catch() 则用于捕获「任一 Promise 拒绝导致整体失败」的兜底场景。
- 如需更精细控制（如取消、超时、重试），建议封装为 Promise.race() + AbortController 或使用 p-all、p-progress 等成熟工具库。
✅ 总结
你不需要让 Promise.all “主动触发”每个回调——而是让每个 Promise 自主报告完成（更新进度），再由 Promise.all 提供最终一致的结果快照。这种职责分离的设计，既保持了代码清晰性，又兼顾了用户体验（实时进度）与工程健壮性（统一错误边界）。