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 der Response-Schnittstelle erstellt einen Klon eines Response-Objekts, der in jeder Hinsicht identisch ist, aber in einer anderen Variablen gespeichert wird.

Wie die zugrunde liegende ReadableStream.tee-API, wird der body eines geklonten Response-Objekts Durchsatzkontrolle im Tempo des schnelleren Verbrauchers der beiden Bodies signalisieren, und ungelesene Daten werden intern in der langsamer konsumierten body-Anforderung ohne Limit oder Durchsatzkontrolle gespeichert. Durchsatzkontrolle bezieht sich auf den Mechanismus, bei dem der Streaming-Konsument von Daten (in diesem Fall der Code, der den Body liest) den Produzenten von Daten verlangsamt (wie z. B. den TCP-Server), um nicht große Datenmengen im Speicher zu laden, die darauf warten, von der Anwendung verwendet 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 genutzt wurde. Tatsächlich existiert clone() hauptsächlich, um die mehrfache Verwendung von Body-Objekten zu ermöglichen (wenn diese nur einmal verwendet werden können).

Syntax

js
clone()

Parameter

Keine.

Rückgabewert

Ein Response-Objekt.

Beispiele

In unserem Beispiel zu Fetch Response Clone (siehe Fetch Response Clone live) erstellen wir ein neues Request-Objekt unter Verwendung des Request()-Konstruktors und übergeben einen JPG-Pfad. Wir holen dann diese Anfrage mittels fetch() ab. Wenn das Fetch erfolgreich ist, klonen wir es, extrahieren einen Blob aus beiden Antworten durch zwei Aufrufe von Response.blob, erstellen Objekt-URLs aus den Blobs mithilfe von URL.createObjectURL() und stellen sie in zwei separaten <img>-Elementen dar.

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 Standard
# ref-for-dom-response-clone①

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch