一个工匠
·
流式响应（Chat）：HTTP 响应体字节流的读取与解析
💡
原文中文，约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 对象。
❓
延伸问答
什么是流式响应？
流式响应是指通过增量读取HTTP响应体，实现数据的及时传输和解析。
Fetch API如何实现流式读取？
Fetch API通过返回一个包含ReadableStream的Response对象，允许增量读取响应体。
Fetch与SSE的主要区别是什么？
Fetch允许自定义消息边界，而SSE则标准化了消息切分和事件语义。
如何处理Fetch流式读取中的字节流？
可以使用TextDecoder的{ stream: true }选项进行增量解码，以避免乱码。
推荐的消息分帧格式是什么？
推荐使用NDJSON格式进行消息分帧，解析简单且调试友好。
在流式响应中，如何确保客户端解析完整的JSON对象？
服务端需要将增量Token封装为可切分的消息单元，确保客户端能完整解析。
➡️
