fetch() 流式数据处理

February 23, 2025 / xChenNing / 12阅读 / 0评论 / 分类: 编程学习前端

流式请求 vs 普通请求

对比维度	流式请求	普通请求
数据接收方式	分块实时接收，逐步处理（如逐字符显示）6	一次性接收完整响应后处理6
内存占用	内存占用低，适合大文件/长文本3	需完整加载响应体，大文件易导致内存压力
实时性	支持动态更新（如聊天、日志流）6	需等待全部数据到达后才能操作
应用场景	实时数据推送、大文件下载、打字机效果6	常规 JSON/文本请求、小文件传输
技术实现复杂度	需手动管理数据块和流状态3	直接调用 `response.json()` 等快捷方法1

实现

发送请求并获取流对象

通过 fetch() 发起请求后，从 response.body 获取可读流：

fetch("https://api.example.com/stream")  
  .then(response => {  
    const reader = response.body.getReader();  
    return processStream(reader);  
  });

逐块读取数据

使用 ReadableStream.getReader() 创建读取器，循环读取数据块：

async function processStream(reader) {  
  while (true) {  
    const { done, value } = await reader.read();  
    if (done) break;  
    // 处理每个数据块（value 是 Uint8Array 类型）    
	console.log(new TextDecoder().decode(value));  
  }  
}

特殊场景：Server-Sent Events（SSE）

若服务端返回 Content-Type: text/event-stream，可使用 EventSource 或第三方库（如 fetch-event-source）处理事件流6。

关键注意事项

流式请求的终止控制
可通过 reader.cancel() 主动中断流，避免资源泄漏3。
编码转换
流数据默认以 Uint8Array 格式传输，需用 TextDecoder 转换为字符串3。
错误处理
Fetch 默认不拒绝 HTTP 错误状态码（如 404/500），需手动检查 response.ok

#TypeScript(5)#流式请求(1)#fetch(1)

文章作者：xChenNing

文章链接：https://blog.glcn.top/archives/fetch-liu-shi-shu-ju-chu-li

xChenNing～(∠・ω< )⌒★ ——「一条不甘堕落的咸鱼」