本文介绍如何在 promise.all 全部成功完成后，安全、有序地为每个解析值执行自定义处理函数（如日志、数据转换或 dom 更新），同时通过监听单个 promise 的 .then() 实现精确的进度反馈。
Promise.all 本身不具备“逐个完成时触发回调”的能力——它只在所有 Promise 全部 resolve 后才统一返回一个包含全部结果的数组。因此，若想对每个已解析的响应单独执行逻辑（例如更新 UI 进度条、缓存中间结果或记录耗时），需采用“双层监听”策略：
- ✅ 进度监听层：在调用 Promise.all 前，为每个原始 Promise 单独添加 .then()，用于实时统计已完成数量；
- ✅ 结果处理层：在 Promise.all(...).then(results => {...}) 中遍历最终结果数组，对每个值执行业务逻辑（如 callbackResolve(res)）。
以下是完整、可运行的实践示例：
// 示例回调函数：处理单个 fetch 响应
function callbackResolve(response) {
if (!response.ok) throw new Error(`HTTP ${response.status}`);
return response.json(); // 或其他转换逻辑
}
// 封装 fetch 并支持错误捕获（推荐）
function fetchData(url) {
return fetch(url)
.catch(err => {
console.error(`Fetch failed for ${url}:`, err);
throw err; // 确保 Promise.all 能捕获失败
});
}
const urls = [
'https://jsonplaceholder.typicode.com/posts/1',
'https://jsonplaceholder.typicode.com/posts/2',
'https://jsonplaceholder.typicode.com/posts/3'
];
const promises = urls.map(fetchData);
// ? 步骤1：实时进度追踪（独立于 Promise.all）
let resolvedCount = 0;
promises.forEach((promise, index) => {
promise.then(() => {
resolvedCount++;
const progress = ((resolvedCount / promises.length) * 100).toFixed(1);
console.log(`✅ [Progress] ${resolvedCount}/${promises.length} (${progress}%)`);
}).catch(err => {
console.warn(`⚠️ Request ${index + 1} failed, but progress continues...`);
});
});
// ? 步骤2：统一结果处理（Promise.all 完成后执行）
Promise.all(promises)
.then(responses => {
console.log('? All requests completed. Processing results...');
// 对每个响应执行 callbackResolve（支持链式操作）
return Promise.all(responses.map(callbackResolve));
})
.then(dataArray => {
console.log('? Final processed data:', dataArray);
// ✅ 此处可安全进行渲染、存储或后续聚合操作
})
.catch(error => {
console.error('❌ Promise.all rejected:', error);
});关键注意事项：
- ⚠️ 避免在 map(fetchData) 中直接 .then(callbackResolve)：这会导致回调立即执行（因 fetch() 返回 Promise，.then() 立即注册但不等待），且 Promise.all 将接收 undefined 或非 Promise 值，破坏并行性；
- ⚠️ 进度统计需用 let 变量 + 闭包：确保每个 .then() 共享同一计数器，而非使用 for...of 中未声明的变量（原文代码中 resolveProgres++ 存在拼写错误，已修正为 resolvedCount）；
- ✅ 推荐搭配 Promise.allSettled：若需容忍部分失败（如网络抖动），可用 Promise.allSettled 替代，并在 .then() 中过滤 status: 'fulfilled' 的项再处理；
- ✅ 现代替代方案考虑 AbortController 或 Promise.race：对超时控制、取消请求等高级需求，应结合信号机制实现。
通过该模式，你既能享受 Promise.all 的高效并发优势，又能精准掌控每个请求的生命周期与结果流——真正实现“并行发起、顺序处理、实时可见”。
