前端必备：详解 XHR 与 Fetch 获取请求进度 (下载/上传进度条，面试常问)

type

status

date

slug

summary

引言：提升用户体验的“请求进度条”

在前端开发中，尤其是在处理大文件下载或需要较长时间才能完成的 API 请求时，向用户实时展示请求的响应进度（或上传进度）是一个常见的需求。如下图所示，一个从 0% 到 100% 的进度条可以极大地提升用户体验，缓解用户等待的焦虑。

实现这个动画效果本身不难，像 Ant Design 等 UI 库都提供了现成的 Progress 组件。

真正的难点在于：如何实时获取到 HTTP 请求的进度数据？

这个问题近年来也成为了前端面试中的高频考点，面试官通常会分别考察你对传统 XMLHttpRequest (XHR) 和现代 Fetch API 获取进度方式的理解。

一、获取下载（响应）进度

这里我们主要关注如何获取服务器响应数据的下载进度。

1. 使用 `XMLHttpRequest` (XHR)

对于 XHR，获取响应进度相对直接。XMLHttpRequest 实例提供了一个 progress 事件，专门用于监听数据传输的进度。

这个 progress 事件的回调函数会接收一个 ProgressEvent 对象，其中包含两个关键属性：

event.loaded: 到目前为止已接收到的字节数（已加载的数据长度）。

event.total: 响应数据的总字节数（数据总长度）。这个值需要服务器在响应头中提供 Content-Length 才能获取到。

实现思路: 通过 (event.loaded / event.total) * 100 就可以计算出当前的下载百分比。

代码示例 (结合 UI 展示):

假设我们有一个简单的 Express 后端服务用于测试：

前端页面结构 (使用 Ant Design 的 Button 和 Progress):

核心 JavaScript 代码，监听 progress 事件并更新进度条：

控制台输出的百分比变化：

将计算出的百分比 percentComplete 传递给 Progress 组件，即可实现动态进度条效果：

最终效果：

2. 使用 `Fetch` API

Fetch API 是现代的、基于 Promise 的网络请求接口，但它没有像 XHR 那样直接提供 onprogress 事件来监听响应进度。我们需要换一种思路，利用 Fetch 返回的 Response 对象的 body (一个 ReadableStream) 来手动读取和计算进度。

实现思路:

获取总长度 (total): 从 Response 对象的 headers 中获取 Content-Length 响应头的值。注意：服务器必须发送此响应头，否则无法计算总进度。

读取已加载长度 (loaded): 使用 response.body.getReader() 获取一个读取器 (Reader)，然后循环调用 reader.read() 方法。每次 read() 返回一个包含 { value: chunk, done: boolean } 的对象，其中 chunk 是一个 Uint8Array (数据块)。累加每次读取到的 chunk.length 即可得到当前已加载的字节数。

代码示例:

代码逻辑解释 (对应图片): 获取 Content-Length:

使用 body.getReader 读取流并累加 loaded:

最终效果 (与 XHR 类似):

Fetch 的关键点: