如何用 Fetch 模拟实现 XMLHttpRequest 的 progress 进度条-js教程-PHP中文网

Fetch无法直接监听progress事件，但可通过ReadableStream读取响应体、累加字节并结合Content-Length计算下载进度，需服务端暴露该响应头，动态内容则无法准确预估。

如何用 fetch 模拟实现 xmlhttprequest 的 progress 进度条

Fetch 本身不支持像 XMLHttpRequest 那样直接监听 progress 事件，但可以通过 ReadableStream + decoder + 计数累计 的方式手动计算下载进度，从而模拟出类似 XHR 的进度条效果。

核心思路：流式读取 + 实时字节统计

利用 response.body.getReader() 获取可读流，每次调用 reader.read() 得到一块 Uint8Array 数据，累加其 .length，再除以已知的总大小（Content-Length），即可算出当前下载百分比。

需要服务端返回 Content-Length 响应头（否则无法预知总大小）
若资源是动态生成或分块传输（如 chunked encoding），则无法准确预估总大小，此时只能显示“加载中”或使用估算策略（如按 chunk 数粗略递增）
推荐配合 AbortController 实现取消，避免 reader 持有失效引用

基础实现：带进度回调的 fetchWithProgress

下面是一个轻量封装，接受 URL 和一个 onProgress 回调函数：

async function fetchWithProgress(url, onProgress) {
  const response = await fetch(url);
  
  if (!response.ok) throw new Error(`HTTP ${response.status}`);

  const contentLength = response.headers.get('content-length');
  const total = contentLength ? parseInt(contentLength, 10) : null;
  const reader = response.body.getReader();
  let loaded = 0;

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;

    loaded += value.length;
    if (onProgress && total) {
      onProgress(loaded, total); // 例如：onProgress(12345, 1048576)
    }
  }

  const chunks = [];
  reader.releaseLock();
  return new Response(new ReadableStream({
    start(controller) {
      controller.enqueue(new Uint8Array([])); // 占位，实际数据已由上面读完
      controller.close();
    }
  }));
}

⚠️ 注意：上述代码仅演示进度逻辑；若需完整响应体（如 JSON 或 Blob），应在循环中收集 value 到 chunks 数组，最后用 new Blob(chunks) 或 new Response(...) 构造新响应。