Response: clone() メソッド

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2017年3月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

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

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

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

構文

clone()

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