Response.clone()

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

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

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

clone()

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