javascript 中用 fetch 处理长连接流数据的核心是 response.body 的 readablestream 与 getreader() 分块读取,支持实时、低延迟、可中断及自定义协议;需手动解析(如 textdecoder 解码、按 \n 切分)、中断重连(abortcontroller + 指数退避)和灵活认证/头信息处理。

JavaScript 中用 fetch 处理服务器下发的长连接流数据,核心是利用 response.body 返回的 ReadableStream,配合 getReader() 分块读取,而不是等全部响应结束再解析。它适合需要实时、低延迟、可中断、带认证或非标准格式的场景(比如带 Authorization 的 SSE、JSONL 日志流、自定义文本协议等)。
基础流式读取:分块接收,不等完整响应
服务端需保持连接不关闭(Connection: keep-alive),并以分块编码(Transfer-Encoding: chunked)持续输出数据。客户端代码如下:
- 调用
fetch(url, { signal })发起请求,可传入AbortController.signal用于后续中断 - 获取
response.body.getReader(),得到一个流读取器 - 在循环中调用
reader.read(),每次返回{ done, value };value是Uint8Array类型的原始字节块 -
done === true表示服务端已关闭流(正常结束);抛错或中断则需捕获并处理
手动解析事件流(类似 SSE,但更灵活)
原生 EventSource 自动识别 data:、id:、event: 等字段,而 fetch 不做任何解析——这正是它的优势:你完全掌控格式。常见做法:
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- 将每个
Uint8Array块转为字符串:new TextDecoder().decode(value) - 按换行符
\n切分消息(SSE 标准每条消息以空行分隔) - 逐行解析:跳过注释行(以
:开头),提取data:后内容、id:字段用于断点续传 - 累积未完成的行(如最后一块没结尾换行),避免消息被截断
中断与重连:主动控制 + 指数退避
fetch 流没有自动重连机制,必须手动实现。关键点:
- 使用
AbortController可随时中止当前请求(如用户切换页面、网络恢复后清理旧连接) - 流中断原因包括:网络断开、服务端崩溃、超时、
reader.read()抛错 - 重连时建议携带上次收到的
Last-Event-ID(通过请求头headers: { 'Last-Event-ID': lastId }) - 首次失败后等待 1 秒,之后每次翻倍(1s → 2s → 4s → …),上限建议 30 秒,避免雪崩
额外能力:Header、认证、类型适配
相比 EventSource,fetch 在流式场景下更自由:
- 可设置任意请求头,例如
Authorization: Bearer xxx或自定义 token - 能读取响应头:
response.headers.get('X-Request-ID'),用于追踪或调试 - 不限于
text/event-stream,支持 JSONL、纯文本、自定义协议甚至二进制流 - 可结合
TransformStream做在线解密、压缩解包、格式转换等中间处理
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










