Response: clone() 方法

基线 广泛可用

此功能已得到广泛应用，并且可在许多设备和浏览器版本中使用。它自以下时间起在所有浏览器中都可用 2017 年 3 月.

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

与底层的 ReadableStream.tee api 一样，克隆的 Response 的 body 将以两个主体中更快的消费者的速度发出背压，并且未读取的数据会在内部排队到较慢的消费 body 上，而没有限制或背压。背压是指数据流式消费方（在本例中为读取主体的代码）减慢数据生产方（如 TCP 服务器）的速度的机制，以免将大量等待应用程序使用的内存数据加载到内存中。如果只有一个克隆的分支被消费，那么整个主体将被缓存在内存中。因此，clone() 是一种按顺序两次读取响应的方法，但你不应使用它以不同速度并行读取非常大的主体。

如果响应主体已被使用，则 clone() 会抛出一个 TypeError。事实上，clone() 存在的主要原因是允许多次使用主体对象（当它们是单次使用时）。

语法

js
clone()

参数

无。

返回值

一个 Response 对象。

示例

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

js
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;
  });
});

规范

规范
Fetch 标准
# ref-for-dom-response-clone①

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅