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