本文详解如何在使用 `promise.all` 并行处理多个 promise 的同时，安全地为每个已解析结果执行自定义回调函数，并实现细粒度的完成进度监控。
Promise.all 的核心语义是“等待所有 Promise 全部 fulfilled 后，一次性返回包含全部结果的数组”。因此，不建议也不需要在单个 Promise 上提前 .then() 来触发业务逻辑——这既破坏了并行性，又可能导致回调被重复或过早执行（尤其在链式调用中误写 fetchData(url).then(...) 而非传入 Promise.all）。正确做法是：先收集所有 Promise，再统一 Promise.all(...).then(results => {...})，并在该回调中遍历 results 数组，逐个调用你的处理函数。
以下是一个完整、健壮的实现示例：
// ✅ 正确：fetchData 返回 Promise，不立即执行副作用
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(fetchData);
// ? 进度追踪：监听每个 Promise 独立完成事件
let resolvedCount = 0;
const total = promises.length;
promises.forEach((promise, index) => {
promise.then(() => {
resolvedCount++;
const progress = ((resolvedCount / total) * 100).toFixed(1);
console.log(`✅ Promise #${index + 1} resolved — Progress: ${progress}%`);
}).catch(err => {
console.warn(`⚠️ Promise #${index + 1} rejected:`, err.message);
});
});
// ? 主流程：所有请求成功后批量处理结果
Promise.all(promises)
.then(results => {
console.log('? All requests completed successfully');
results.forEach((data, i) => {
// ? 替换为你自己的回调逻辑，例如渲染、存储、校验等
callbackResolve(data, urls[i], i);
});
})
.catch(error => {
console.error('❌ One or more requests failed:', error);
});
// 示例回调函数（请按实际需求实现）
function callbackResolve(data, url, index) {
console.log(`? Processing result from ${url} (index ${index}):`, {
id: data.id,
title: data.title?.substring(0, 40) + '...'
});
}? 关键注意事项：
- 进度 ≠ 结果顺序：.then() 监听的是各 Promise 独立完成时间，而 Promise.all 的 results 数组严格按输入 Promise 的原始顺序排列（即使第3个请求最先返回，其结果仍在 results[2]）。
- 错误处理分离：单独监听 .then() 仅捕获 fulfill；务必添加 .catch() 避免未处理拒绝导致静默失败。Promise.all 本身只要有一个 reject 就整体 reject，因此主流程仍需 catch 兜底。
- 避免重复执行：确保 callbackResolve 是幂等的，或通过状态标记防止因调试/重试导致多次调用。
- 性能提示：若需高频更新 UI 进度条，建议节流（如 throttle(50ms)）或改用 Promise.allSettled + requestIdleCallback 提升响应性。
综上，Promise.all 不是“过程控制器”，而是“结果聚合器”。将进度监控与结果处理解耦，既符合 Promise 规范，又能兼顾可读性、健壮性与可观测性。
