如何通过Promise.all检查Promise解析状态？实现图片下载进度反馈

好问题！直接用Promise.all确实没法跟踪单个Promise的完成状态——因为它只会在所有Promise都成功完成或者任意一个失败时才会返回结果，中间过程的单个Promise进度是完全黑盒的，没办法直接获取。

替代方案：给每个Promise单独绑定进度回调 #

要实现“完成10/20张时反馈50%”的需求，核心思路是给每个Promise单独添加完成回调，让它们在各自resolve时主动更新进度计数器，再根据计数器计算百分比反馈给用户。

具体代码示例如下：

// 初始化进度相关变量
const totalImages = views.length;
let completedCount = 0;

// 定义进度更新函数（可以替换成你的UI更新逻辑）
function updateProgress() {
  const percentage = Math.round((completedCount / totalImages) * 100);
  console.log(`已完成${percentage}%的图片下载`);
  // 比如在这里更新页面上的进度条文字：
  // document.getElementById('progress-text').textContent = `已完成${percentage}%`;
}

// 给每个fetch请求包装进度跟踪逻辑
const imagePromises = views.map(view => {
  return fetch(`/sites/${siteId}/views/${view.id}/image/`)
    .then(response => {
      // 每完成一个请求，计数器+1并更新进度
      completedCount++;
      updateProgress();
      return response; // 保留原始响应结果，不影响后续Promise.all的处理
    })
    .catch(error => {
      // 处理单个请求失败的情况，可根据需求决定是否计入进度
      console.error(`图片${view.id}下载失败：`, error);
      // 如果失败也算作“处理完成”，可以取消下面两行的注释
      // completedCount++;
      // updateProgress();
      throw error; // 抛出错误，让Promise.all能捕获到全局失败状态
    });
});

// 最后用Promise.all等待所有请求完成（成功或失败的最终状态）
Promise.all(imagePromises)
  .then(allResponses => {
    console.log('所有图片下载完成！');
    // 在这里处理所有成功下载的响应结果
  })
  .catch(globalError => {
    console.error('存在图片下载失败：', globalError);
  });

额外说明 #

• 关于失败的处理：你可以根据业务需求决定是否把失败的请求计入进度。比如如果允许部分失败，就可以在catch里也更新计数器；如果要求必须全部成功，就只在then里更新。
• 这个方案既保留了Promise.all批量处理最终结果的能力，又能实时跟踪每个Promise的完成状态，完美解决你的进度反馈需求。

内容的提问来源于stack exchange，提问作者Rafał Bagrowski