JavaScript教程：使用Fetch API追踪下载进度-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01116/article/details/148574750

JavaScript教程：使用Fetch API追踪下载进度

ru.javascript.info Современный учебник JavaScript 项目地址: https://gitcode.com/gh_mirrors/ru/ru.javascript.info

理解Fetch API的进度追踪机制

在现代Web开发中，Fetch API已成为发起网络请求的主流方式。它不仅提供了简洁的语法，还支持对下载过程的实时监控。本文将深入探讨如何利用Fetch API追踪文件下载进度。

为什么需要进度追踪？

当处理大文件下载时，用户界面显示进度条可以显著提升用户体验。传统的response.json()或response.text()方法会一次性返回所有数据，无法提供中间状态。这时就需要使用更底层的response.body特性。

核心概念：ReadableStream

response.body返回的是一个ReadableStream对象，这是Streams API规范中定义的一种特殊数据类型。它允许我们按块(chunk)逐步读取响应体，而不是等待整个响应完成。

实现进度追踪的步骤

1. 获取流读取器

const reader = response.body.getReader();

这行代码创建了一个流读取器，它是我们读取数据块的关键。

2. 循环读取数据块

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

每次调用reader.read()都会返回：

done：布尔值，表示是否读取完成
value：包含数据块的Uint8Array类型数组

3. 计算和显示进度

通过累加每个数据块的长度，我们可以计算已下载的字节数：

let receivedLength = 0;
const contentLength = +response.headers.get('Content-Length');

while(true) {
  const {done, value} = await reader.read();
  if (done) break;
  
  receivedLength += value.length;
  console.log(`已下载: ${receivedLength}/${contentLength}字节`);
}

完整示例解析

让我们看一个完整的实现示例：

async function trackDownloadProgress() {
  // 1. 发起请求并获取流读取器
  const response = await fetch('large-file-url');
  const reader = response.body.getReader();
  
  // 2. 获取总长度
  const contentLength = +response.headers.get('Content-Length');
  let receivedLength = 0;
  let chunks = [];
  
  // 3. 读取数据块
  while(true) {
    const {done, value} = await reader.read();
    if (done) break;
    
    chunks.push(value);
    receivedLength += value.length;
    updateProgressBar(receivedLength, contentLength);
  }
  
  // 4. 合并数据块
  const chunksAll = new Uint8Array(receivedLength);
  let position = 0;
  for(let chunk of chunks) {
    chunksAll.set(chunk, position);
    position += chunk.length;
  }
  
  // 5. 解码数据
  const result = new TextDecoder("utf-8").decode(chunksAll);
  return JSON.parse(result);
}

function updateProgressBar(received, total) {
  const percent = Math.round((received / total) * 100);
  console.log(`下载进度: ${percent}%`);
}

关键注意事项

内容长度可能不可用：Content-Length头部在某些情况下可能不存在，特别是跨域请求时。
二进制数据处理：如果需要处理二进制数据而非文本，可以直接创建Blob对象：
```
const blob = new Blob(chunks);
```
性能考虑：对于超大文件，频繁更新UI可能影响性能，可以考虑节流(throttle)进度更新。
错误处理：务必添加适当的错误处理逻辑，包括网络错误和流读取错误。