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