当前位置：首页 > 文章列表 > 文章 > 前端 > 前端 Response 读取后怎样复制给两个消费者

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

来源：17golang原创 2026-10-18 15:09:24 0浏览收藏

我第一次遇到这个问题，是在给一个 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 };
}

Response、body 流与 Response.clone 两个消费者之间的静态关系说明图 — 图1：Response.clone() 的分支关系说明图，查看响应对象、body 流和两个消费者的边界；这是静态说明图，不是运行截图。

这里的要点是“先复制，后读取”。原响应和 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 对象。