Response: clone() Methode

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.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die clone() Methode des Response-Interfaces erstellt eine Kopie eines Response-Objekts, die in jeder Hinsicht identisch ist, aber in einer anderen Variable gespeichert wird.

Ähnlich wie die zugrunde liegende ReadableStream.tee API signalisiert der body eines geklonten Response den Rückstaudruck mit der Geschwindigkeit des schnelleren Verbrauchers der beiden body's, und ungelesene Daten werden intern im langsamer verbrauchten body zwischengespeichert, ohne Begrenzung oder Rückstaudruck. Rückstaudruck bezieht sich auf den Mechanismus, durch den der streamende Verbraucher von Daten (in diesem Fall der Code, der den Body liest) den Produzenten von Daten (wie z. B. den TCP-Server) verlangsamt, um keine großen Datenmengen im Speicher zu haben, die darauf warten, von der Anwendung genutzt zu werden. Wenn nur ein geklonter Zweig konsumiert wird, wird der gesamte Body im Speicher gepuffert. Daher ist clone() eine Möglichkeit, eine Antwort zweimal nacheinander zu lesen, aber Sie sollten es nicht verwenden, um sehr große Bodies parallel mit unterschiedlichen Geschwindigkeiten zu lesen.

clone() wirft einen TypeError, wenn der Response-Body bereits verwendet wurde. Tatsächlich ist der Hauptgrund, warum clone() existiert, die mehrfache Nutzung von Body-Objekten zu ermöglichen (wenn sie nur einmal verwendet werden können).

Syntax

js
clone()

Parameter

Keine.

Rückgabewert

Ein Response-Objekt.

Beispiele

In unserem Fetch Response clone Beispiel (siehe Fetch Response clone live) erstellen wir ein neues Request-Objekt mit dem Request()-Konstruktor, indem wir ihm einen JPG-Pfad übergeben. Wir rufen dann diese Anfrage mit fetch() ab. Wenn der Abruf erfolgreich aufgelöst wird, klonen wir ihn, extrahieren ein Blob aus beiden Responses mit zwei Response.blob-Aufrufen, erstellen Objekt-URLs aus den Blobs mit URL.createObjectURL(), und zeigen sie in zwei separaten <img>-Elementen an.

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

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Siehe auch