Response: clone() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2017.

clone() は Response インターフェイスのメソッドで、レスポンスオブジェクトの複製を作成します。この複製はあらゆる面で同一ですが、異なる変数に格納されます。

基礎となる ReadableStream.tee api のように、複製された Response の body は、 2 つの本体のうち より速い コンシューマーの速度で背圧を通知し、未読データは制限や背圧なしにより遅く消費された body で内部でキューイングされます。 背圧とは、データのストリーミングコンシューマー（この場合は本体を読むコード）が、アプリケーションで使用されるのを待っているメモリーに大量のデータを読み込まないように、データのプロデューサー（TCP サーバーなど）の速度を低下させるメカニズムを参照することです。 もし複製された分岐が一つしか消費されない場合、本体全体がメモリーにバッファリングされます。 したがって、clone() はレスポンスを 2 回連続して読み込むための一つの方法ですが、非常に大きな本体を異なる速度で並列に読み込むために使用するべきではありません。

clone() は、レスポンス本体が既に使用されている場合は TypeError を発生させます。 実際、clone() が存在する主な理由は、本体オブジェクトを複数回使用できるようにするためです（一度しか使用できない場合）。

構文

js
clone()

引数

なし。

返値

Response オブジェクトです。

例

Fetch Response clone の例（Fetch Response clone のライブ版 を参照）では、 Request() コンストラクターで新しい Request オブジェクトを作成し、 JPG のパスを渡します。 そして fetch() を使用してこのリクエストを読み込みます。 フェッチが正常に解決されると、それを複製し、2 つの Response.blob 呼び出しを使用して両方のレスポンスから blob を抽出し、URL.createObjectURL() を使用して blob からオブジェクト URL を作成し、それらを 2 つの別々の <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;
  });
});

仕様書

Specification
Fetch Standard
# ref-for-dom-response-clone①

ブラウザーの互換性

BCD tables only load in the browser

関連情報