fetch返回的response.body是readablestream,需用getreader()或text()/json()等方法消费,流只能读一次且不能直接操作;手动读取时通过reader.read()分块获取uint8array,配合textdecoder处理utf-8截断,适用于大文件下载、日志流式渲染等场景。

Fetch 返回的 Stream 数据需要通过 response.body 获取可读流(ReadableStream),再用 getReader() 或内置方法(如 text()、json()、arrayBuffer())按需解析,不能直接读取原始流对象。
理解 response.body 是 ReadableStream
当服务器返回大量数据(如大文件、实时日志、SSE)时,浏览器不会一次性加载全部响应体,而是以流的形式分块传输。response.body 就是这个底层流,类型为 ReadableStream。它不是数组或字符串,不能直接 console.log 或 JSON.parse。
- 调用
response.text()/response.json()会自动消费整个流并返回 Promise,适合小到中等响应 - 若需边接收边处理(例如逐块解压、实时渲染、限制内存占用),必须手动读取流
- 流只能被消费一次,一旦调用过
text(),再读body就会报错 “Cannot read body after it has been consumed”
手动读取流:用 getReader() 分块处理
适用于需要控制读取节奏、处理二进制块、实现断点续传或自定义解析逻辑的场景。
- 调用
const reader = response.body.getReader()获取流读取器 -
reader.read()返回 Promise,resolve 结果为{ done: boolean, value: Uint8Array } -
value是每次接收到的字节块(Uint8Array),done为 true 表示流结束 - 记得在 finally 中调用
reader.releaseLock(),避免流被长期锁定
示例(逐块打印长度):
你接手一个需求时,是不是经常这样:"改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续";这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境(JDK、Spring Boot、ORM、数据库、前端框架),记在
.then(res => {
const reader = res.body.getReader();
return reader.read().then(function process({ done, value }) {
if (done) return;
console.log('Received chunk:', value.length, 'bytes');
return reader.read().then(process);
}).finally(() => reader.releaseLock());
});
处理常见流类型:文本、JSON、二进制
多数情况无需手动读流,优先使用内置方法,语义清晰且自动处理编码和错误:
-
response.text()→ 返回字符串(自动按 Content-Type charset 解码,如 utf-8) -
response.json()→ 返回解析后的对象(要求响应是合法 JSON,否则 reject) -
response.arrayBuffer()→ 返回 ArrayBuffer,适合图像、音频、加密等二进制操作 -
response.blob()→ 返回 Blob,适合下载、URL.createObjectURL 预览
注意:response.formData() 不支持流式解析,仅适用于 multipart/form-data 响应(且必须完整加载)。
处理 Server-Sent Events(SSE)或自定义分隔流
如果服务器按行推送(如 data: ...\n\n 格式),可用 TextDecoder + 手动拼接 + 换行切分:
- 创建
const decoder = new TextDecoder('utf-8') - 每次读到
value后用decoder.decode(value, { stream: true })转字符串(stream: true处理 UTF-8 多字节跨块问题) - 将解码结果缓存并按
\n或自定义分隔符切分,逐条处理
实际项目中可封装成 readLines(reader) 异步迭代器,提升复用性。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










