前端 Response 读取后怎样复制给两个消费者

我第一次遇到这个问题，是在给一个 fetch 请求加日志时：业务代码已经通过 response.json() 拿到数据，日志分支再调用 response.text() 却直接失败。原因不是 JSON 解析把内容“删掉”了，而是 Response 的 body 是一次性消费的流。

要把同一个响应交给两个消费者，关键不是把读取方法调用两遍，而是在第一次读取之前调用 response.clone()，再让原响应和克隆响应各自消费一次。

下面只讨论 Fetch Response 的读取时机、两个消费者的分工，以及大响应体下的取舍。

为什么第二次读取会失败

json()、text()、blob() 和 arrayBuffer() 都会读取同一个 body。第一次读取完成后，bodyUsed 会变成 true，再读原对象就没有可消费的内容了。

async function showOneShotBody(url) {
  const response = await fetch(url);
  console.log(response.bodyUsed); // 第一次读取前，body 还没有被消费

  const data = await response.json();
  console.log(response.bodyUsed); // json() 消费完成后，状态变为 true

  // 这里再调用 text() 会因为响应体已经使用而失败
  return response.text();
}

这个现象也解释了为什么把两个读取操作放进 Promise.all 不能解决问题：两个 Promise 仍然竞争同一个 body，并没有创建第二份响应。

正确的复制时机是第一次读取之前

clone() 返回一个内容相同、但存放在不同变量中的 Response。它必须在 body 尚未被读取时调用；如果原响应已经消费过，再调用 clone() 会抛出 TypeError。

async function readForBusinessAndLog(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`请求失败：${response.status}`); // 先把 HTTP 状态错误交给调用方
  }

  const logResponse = response.clone(); // 在任何 json/text 调用前复制响应
  const data = await response.json(); // 原响应交给业务分支
  const rawText = await logResponse.text(); // 克隆响应交给日志分支

  return { data, rawText };
}

这里的要点是“先复制，后读取”。原响应和 logResponse 都有自己的消费入口，业务 JSON 和日志文本可以按各自需要选择读取方法。

两个消费者应该各自承担什么工作

实际项目里，两个消费者通常不是把同一段解析逻辑重复一遍，而是职责不同：原响应负责业务对象，克隆响应负责审计摘要、缓存原文或生成 Blob。给每个分支命名，能明显降低把两个 body 混用的概率。

async function loadProfile(url) {
  const response = await fetch(url);
  const auditResponse = response.clone(); // 旁路分支保留原始文本

  const profile = await response.json();
  const auditText = await auditResponse.text();

  // 日志只记录必要摘要，避免把完整敏感响应直接写入日志
  return {
    profile,
    audit: { status: response.status, size: auditText.length }
  };
}

如果两个分支都需要 JSON，可以让两个响应分别调用 json()；如果一个分支要显示图片，则让克隆分支调用 blob()。复制的是响应，不是已经解析好的 JavaScript 对象。

大响应体不要随意并行 clone

clone() 适合小型 JSON、需要同时交给业务和审计的响应。对于很大的下载内容，两个分支的读取速度可能不同：较慢的分支会积压尚未读取的数据，内存压力会随之增加。尤其是只消费其中一个克隆分支时，整个 body 可能被缓存在内存里。

这种场景更稳妥的选择通常是只读取一次，再把已经解析出的必要结果分发给多个业务函数；如果确实需要原始字节，则应在设计阶段明确流式处理、缓存上限和取消策略，而不是默认复制整个响应。

常见问题

可以先调用 response.json()，再 clone() 吗？ 不行。读取已经开始或完成后，响应 body 已经被使用，应在第一次读取前创建克隆。

clone() 会把响应变成普通对象吗？ 不会。它返回另一个 Response，两个响应仍需分别调用一次读取方法。

两个消费者读取速度不同会怎样？ 小响应通常没有明显问题，但大响应体可能让慢分支积压数据，应优先考虑一次读取后分发。

这次排查最后留下的判断很简单：先看谁会消费 body，再决定在哪里 clone；把 clone() 放在第一个 json()、text() 或 blob() 之前，两个消费者才能各自拿到完整响应。