Response: clone() 方法

Baseline 已广泛支持

此特性已得到良好确立，可跨多种设备和浏览器版本使用。自 2017 年 3 月起，所有浏览器均支持此特性。

注意：此功能在 Web Workers 中可用。

Response 接口的 clone() 方法会创建一个响应对象的克隆，该克隆在各个方面都与原始响应对象相同，但存储在不同的变量中。

与底层的 ReadableStream.tee API 类似，克隆的 Response 的 body 会以两个 body 中较快的消费者为速率发出反压信号，未读取的数据将无限制地或不带反压地排队在内部，供较慢的消费者使用。反压是指数据流消费者（在此例中，即读取 body 的代码）减缓数据生产者（如 TCP 服务器）速度的机制，以避免在内存中积压大量等待应用程序使用的数据。如果只有一个克隆的分支被消费，则整个 body 将在内存中缓冲。因此，clone() 是连续两次读取响应的一种方法，但你不应该使用它来并行处理速度不同的非常大的 body。

如果响应 body 已经被使用过，clone() 将抛出 TypeError。事实上，clone() 存在的主要原因是允许 body 对象被多次使用（因为它们通常只能使用一次）。

语法

clone()

在我们 Fetch Response clone 示例（见 Fetch Response clone 实时示例）中，我们使用 Request() 构造函数创建一个新的 Request 对象，并传入一个 JPG 路径。然后，我们使用 fetch() 来获取此请求。当 fetch 成功解析后，我们克隆它，使用两次 Response.blob 调用从两个响应中提取 blob，使用 URL.createObjectURL() 从 blob 创建对象 URL，并将它们显示在两个单独的 <img> 元素中。

const image1 = document.querySelector(".img1");
const image2 = document.querySelector(".img2");

const myRequest = new Request("flowers.jpg");

fetch(myRequest).then((response) => {
  const response2 = response.clone();

  response.blob().then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    image1.src = objectURL;
  });

  response2.blob().then((myBlob) => {
    const objectURL = URL.createObjectURL(myBlob);
    image2.src = objectURL;
  });
});