html实现Fetch流式响应_html fetch ReadableStream流式响应读取【建议收藏】-html教程-PHP中文网

response.body是ReadableStream，需用getReader()和read()手动流式读取；text()/json()会锁死流并阻塞内存，不可用于流式场景。

html实现fetch流式响应_html fetch readablestream流式响应读取【建议收藏】

Fetch 的 response.body 确实是 ReadableStream，但直接读取流式响应需要手动处理 getReader() 和 read() 循环，不是开箱即用的“自动逐行输出”。

为什么 `response.text()` 或 `response.json()` 不能流式处理

这两个方法会等待整个响应体下载完成再解析，内部调用了 arrayBuffer()，完全阻塞流。一旦调用，response.body 就被锁死，后续无法再调用 getReader()。

常见错误现象：TypeError: Failed to execute 'getReader' on 'ReadableStream': ReadableStream is locked
使用场景：服务端返回 SSE（Server-Sent Events）、LLM 流式 token、大文件分块传输等需要边收边处理的场景
关键判断：必须在拿到 Response 后立刻操作 response.body，且只做一次 getReader()

如何正确读取 `ReadableStream` 并按 chunk 处理

核心是用 reader.read() 返回的 Promise 解析每次接收的 { done, value }，其中 value 是 Uint8Array，需手动转字符串（注意编码）。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

不要直接 new TextDecoder().decode(chunk) —— 这会截断 UTF-8 多字节字符（如中文），应传入 { stream: true } 选项
推荐写法：const decoder = new TextDecoder("utf-8", { stream: true });，然后循环中调用 decoder.decode(chunk, { stream: true })
示例片段：

const response = await fetch("/api/stream");
const reader = response.body.getReader();
const decoder = new TextDecoder("utf-8", { stream: true });

while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  const text = decoder.decode(value, { stream: true });
  console.log(text); // 每次收到的 chunk 字符串
}

如何模拟“逐行”处理（比如 SSE 或换行分隔的流）

浏览器原生不提供 for await...of 对 response.body 的行迭代支持（Chrome 117+ 实验性支持 response.body.pipeThrough(new TextDecoderStream()).pipeThrough(new TransformStream(...))，但兼容性差）。稳妥做法是手动拼接 + 换行符切分。