💡
原文中文,约5900字,阅读约需14分钟。
📝
内容提要
本文介绍了通过 Fetch API 的 ReadableStream 实现 HTTP 流式响应的原理。Fetch API 支持增量读取响应体,适合流式场景,相较于 SSE,Fetch 提供了更灵活的消息边界定义。流式读取的关键在于字节流的处理,以确保数据的及时传输和解析。
🎯
关键要点
- 本文介绍了通过 Fetch API 的 ReadableStream 实现 HTTP 流式响应的原理。
- Fetch API 支持增量读取响应体,适合流式场景,相较于 SSE,Fetch 提供了更灵活的消息边界定义。
- 流式读取的关键在于字节流的处理,以确保数据的及时传输和解析。
- Fetch API 通过 fetch(url) 返回 Response 对象,响应体通过流式接口增量读取。
- res.body 是 ReadableStream<Uint8Array>,支持增量消费。
- SSE 和 Fetch 的主要区别在于消息边界的定义和事件语义的标准化。
- Fetch 流式读取允许自定义消息边界,适合需要 POST、鉴权 Header 的场景。
- 链路传输中,字节在链路的缓冲位置会影响增量数据的接收。
- Fetch 流式读取的基本模型包括手动读取和管道处理两种方式。
- 使用 TextDecoder 的 { stream: true } 选项可以实现增量解码,避免乱码。
- 推荐使用 NDJSON 格式进行消息分帧,解析简单且调试友好。
- 服务端需要将增量 Token 封装为可切分的消息单元,确保客户端解析完整的 JSON 对象。
➡️