当前位置：首页 > article >正文

使用 fetch 实现流式传输：核心原理与实践

article 2025/4/1 18:27:56

在现代前端开发中，流式传输（Streaming）技术越来越受到开发者的关注，尤其是在处理大文件、实时数据或需要逐步呈现内容的场景中。通过 fetch API 实现流式传输，可以在不阻塞 UI 的情况下逐步获取和处理数据，从而提升用户体验。

什么是流式传输？

流式传输是一种逐步获取数据的方式，不同于传统的请求响应模式（即一次性返回所有数据），流式传输允许你从服务器获取数据的同时，也能逐步处理数据。这种方式尤其适用于处理大规模数据（如视频、音频、大文件）或实时数据（如实时消息、实时日志等）的场景。

`fetch` API 与流式传输

fetch API 是现代浏览器中用于发起 HTTP 请求的标准方法。它支持响应体的流式读取，使得开发者能够逐步处理响应数据，而无需等待完整的响应返回。这一功能通过 ReadableStream 接口实现，允许我们逐块读取响应数据。

1. 获取流式响应

fetch API 返回的 Response 对象包含一个 body 属性，这个 body 是一个 ReadableStream，它代表着响应数据流。通过 ReadableStream，我们可以按需读取数据，而不是等待所有数据都被加载完成。

示例代码：

const response = await fetch('https://example.com/large-file');
const reader = response.body.getReader();

getReader() 方法返回一个 ReadableStreamDefaultReader 对象，我们可以使用它来按块读取数据。

2. 逐步读取数据

ReadableStreamDefaultReader 提供了 read() 方法，它会返回一个包含两个属性的对象：

done：一个布尔值，表示流是否已结束。如果为 true，说明数据已经全部读取完毕。
value：当前读取的数据块，通常是一个 Uint8Array 类型。

通过循环调用 read() 方法，我们可以逐步读取流中的数据。

示例代码：

const reader = response.body.getReader();
let receivedLength = 0;
let chunks = [];

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

  receivedLength += value.length;
  chunks.push(value);
  console.log(`Received ${receivedLength} bytes`);
}

// 将数据块拼接成完整的内容
const fullResponse = new TextDecoder().decode(Uint8Array.from(chunks));

3. 解码和处理数据

value 返回的是一个 Uint8Array 类型的二进制数据，通常需要进行解码才能将其转换为文本内容。在 JavaScript 中，可以使用 TextDecoder 对象来解码这些二进制数据。

const text = new TextDecoder().decode(value);

4. 结束流式传输

当 done 为 true 时，表示数据已经读取完毕，我们可以停止循环并进行后续处理。

const { done, value } = await reader.read();
if (done) {
  console.log("Streaming finished");
  break;
}

5. 错误处理

在实际应用中，流式传输过程中可能会出现错误，因此需要进行错误处理。可以使用 try-catch 语句捕获异常，并进行相应的处理。

try {
  const response = await fetch('https://example.com/large-file');
  const reader = response.body.getReader();
  // 处理流数据
} catch (error) {
  console.error('Error while fetching data:', error);
}