流式响应（Chat）：HTTP 响应体字节流的读取与解析
原文中文，约5900字，阅读约需14分钟。
📝
内容提要
本文介绍了通过 Fetch API 的 ReadableStream 实现 HTTP 流式响应的原理。Fetch API 支持增量读取响应体，适合流式场景，相较于 SSE，Fetch 提供了更灵活的消息边界定义。流式读取的关键在于字节流的处理，以确保数据的及时传输和解析。
🔎
延伸解读
流式响应的优势
Fetch API 的 ReadableStream 允许增量读取 HTTP 响应体，这在处理实时数据时尤为重要。相比于传统的响应读取方式，流式读取可以在数据到达时立即处理，减少延迟，提升用户体验，尤其适合聊天应用和实时更新场景。
SSE与Fetch的比较
虽然 SSE 和 Fetch 都能实现流式数据传输，但它们的实现方式和适用场景有所不同。SSE 提供了标准化的事件语义和重连机制，而 Fetch 则允许开发者自定义消息边界，适合需要 POST 请求和复杂鉴权的场景。选择合适的技术取决于具体需求。
链路传输中的挑战
在实现流式响应时，链路传输的缓冲机制可能导致数据延迟到达。服务端的写入、TCP 的流控和浏览器的内部队列都可能影响数据的实时性。因此，开发者需要关注这些环节，以确保数据能够及时传输和处理。
❓
Q&A
什么是流式响应？
流式响应是指通过增量读取HTTP响应体，实现数据的及时传输和解析。
Fetch API如何实现流式读取？
Fetch API通过返回一个包含ReadableStream的Response对象，允许增量读取响应体。
Fetch与SSE的主要区别是什么？
Fetch允许自定义消息边界，而SSE则标准化了消息切分和事件语义。
如何处理Fetch流式读取中的字节流？
可以使用TextDecoder的{ stream: true }选项进行增量解码，以避免乱码。
推荐的消息分帧格式是什么？
推荐使用NDJSON格式进行消息分帧，解析简单且调试友好。
在流式响应中，如何确保客户端解析完整的JSON对象？
服务端需要将增量Token封装为可切分的消息单元，确保客户端能完整解析。
🏷️
