Fetch Response.body 怎样逐块读取文本流

要逐块读取 Fetch 返回的文本，核心不是反复调用 response.text()，而是拿到 response.body 后创建 reader。body 是一个可读字节流，reader.read() 每次返回一小段字节；再用同一个 TextDecoder 增量解码，就能把网络分块和中文字符边界分开处理。

官方资料：https://developer.mozilla.org/en-US/docs/Web/API/Response/body

最稳妥的写法是：先检查 HTTP 状态和 body，再用 getReader() 循环读取；解码时传入 { stream: true }，循环结束后再做一次收尾解码。这样即使一个汉字被拆到两个网络块，也不会直接变成乱码。

先划清 Response 的读取边界

response.ok 只表示状态码是否在 200 到 299 之间，它不会替你消费响应体。response.body 可能是 null，而一个已经被 text()、json() 或 reader 消费过的响应，也不能再次当作全新的输入使用。把这些判断放在读取前，可以避免把“服务端返回错误”和“流本身读失败”混成同一种问题。

async function readTextStream(url, signal) {
  // 让调用方可以通过 AbortController 取消网络请求
  const response = await fetch(url, { signal });
  if (!response.ok) {
    // 这里只读取一次错误响应，避免正常流和错误流混用
    throw new Error(`HTTP ${response.status}`);
  }
  if (!response.body) {
    // 没有 body 时没有可供 getReader() 获取的字节流
    return "";
  }
  return readBody(response.body);
}

用 reader 逐块读取并保留字符边界

getReader() 会锁定这个流，随后每次 read() 返回 done 和 value。value 通常是 Uint8Array，不能直接用字符串拼接代替解码。UTF-8 的一个汉字可能跨越两个字节块，所以要复用同一个解码器，并在非最后一块传入 stream: true。

async function readBody(body) {
  // 一个 reader 只服务当前 body，避免多个消费者争抢同一条流
  const reader = body.getReader();
  const decoder = new TextDecoder("utf-8");
  let text = "";

  try {
    while (true) {
      // 每次只取当前到达的字节块，不把整份响应一次性放进内存
      const { done, value } = await reader.read();
      if (done) {
        // 最后一块可能还暂存在解码器内部，这里强制冲刷
        text += decoder.decode();
        break;
      }
      // stream=true 会保留跨块的半个 UTF-8 字符
      text += decoder.decode(value, { stream: true });
    }
    return text;
  } finally {
    // 释放锁，让后续代码有机会接管这条流
    reader.releaseLock();
  }
}

这段代码把“字节块”和“文本片段”分成两层：reader 负责输入边界，decoder 负责编码边界。若页面要实时展示，可以把每次得到的片段交给渲染函数；若只是保存完整文本，则继续累加即可，但这仍然会占用与全文长度相关的内存。

取消、异常和资源释放怎么处理

流式读取的风险主要有三类：请求被取消、服务器或网络在中途失败、调用方把同一个 body 交给多个消费者。用 AbortController 取消请求，用 try...finally 释放 reader 锁；如果业务只需要首个片段，读到目标后应明确取消，而不是让连接继续无人消费。

async function readUntil(url, marker) {
  // 控制器同时绑定 fetch，超时或页面切换时可主动终止
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), 10_000);

  try {
    const response = await fetch(url, { signal: controller.signal });
    if (!response.ok || !response.body) {
      throw new Error("响应不可读取");
    }
    const reader = response.body.getReader();
    const decoder = new TextDecoder();
    try {
      while (true) {
        // 在片段中找到业务标记后立即取消剩余读取
        const { done, value } = await reader.read();
        if (done) return false;
        const part = decoder.decode(value, { stream: true });
        if (part.includes(marker)) {
          await reader.cancel("已找到目标片段");
          return true;
        }
      }
    } finally {
      // cancel 后仍释放锁，保证消费边界完整闭合
      reader.releaseLock();
    }
  } finally {
    // 无论成功、失败还是超时，都清理定时器
    clearTimeout(timer);
  }
}

什么时候不要手写逐块读取

如果接口返回的是一次性 JSON，直接使用 response.json() 更清晰；如果文本很短、没有增量展示需求，response.text() 也更省代码。只有当内容持续到达、需要实时反馈、响应可能较大，或者业务要在完整结束前做局部处理时，Response.body 才值得引入。

发布前可以按下面的清单检查：

• 是否在读取前判断了 response.ok 和 response.body？
• 是否复用了同一个 TextDecoder，并在结束时调用无参数的 decode()？
• 是否明确了取消条件，并在 finally 中清理 reader 锁或定时器？
• 是否避免把同一个 body 同时交给 text()、json() 和 getReader()？

常见问题

为什么每次 read() 得到的不是完整的一行？

网络块的边界与业务行边界无关。把解码后的片段放入缓冲区，按换行符拆分，并保留最后一个未完成片段即可。

调用 response.body.getReader() 后还能调用 response.text() 吗？

通常不应这样做。reader 会锁定流，且 body 只能被消费一次；需要两种处理方式时，应在请求阶段使用 response.clone() 规划两个独立消费分支。