Response: body-Eigenschaft

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: Dieses Feature ist verfügbar in Web Workers.

Die schreibgeschützte body-Eigenschaft der Response-Schnittstelle ist ein ReadableStream des Körperinhalts.

Wert

Ein ReadableStream, oder andernfalls null für jedes Response-Objekt, das mit einer null body-Eigenschaft konstruiert wurde, oder für jede tatsächliche HTTP-Antwort, die keinen Body hat.

Der Stream ist ein lesbarer Byte-Stream, der das Zero-Copy-Lesen mit einem ReadableStreamBYOBReader unterstützt.

Hinweis: Aktuelle Browser entsprechen nicht tatsächlich der Spezifikationsanforderung, die body-Eigenschaft auf null zu setzen für Antworten ohne Body (zum Beispiel Antworten auf HEAD-Anfragen oder 204 No Content-Antworten).

Beispiele

Kopieren eines Bildes

In unserem einfachen Stream-Pumpen-Beispiel rufen wir ein Bild ab, geben den Stream der Antwort über response.body frei, erstellen einen Leser mit ReadableStream.getReader(), und stellen dann die Chunks dieses Streams in einen zweiten, benutzerdefinierten lesbaren Stream ein - und erzeugen damit effektiv eine identische Kopie des Bildes.

js
const image = document.getElementById("target");

// Fetch the original image
fetch("./tortoise.png")
  // Retrieve its body as ReadableStream
  .then((response) => response.body)
  .then((body) => {
    const reader = body.getReader();

    return new ReadableStream({
      start(controller) {
        return pump();

        function pump() {
          return reader.read().then(({ done, value }) => {
            // When no more data needs to be consumed, close the stream
            if (done) {
              controller.close();
              return;
            }

            // Enqueue the next data chunk into our target stream
            controller.enqueue(value);
            return pump();
          });
        }
      },
    });
  })
  .then((stream) => new Response(stream))
  .then((response) => response.blob())
  .then((blob) => URL.createObjectURL(blob))
  .then((url) => console.log((image.src = url)))
  .catch((err) => console.error(err));

Erstellen eines BYOB-Readers

In diesem Beispiel konstruieren wir einen ReadableStreamBYOBReader aus dem Body unter Verwendung von ReadableStream.getReader({mode: 'byob'}). Wir können diesen Leser dann nutzen, um einen Zero-Copy-Transfer der Antwortdaten zu implementieren.

js
async function getProducts(url) {
  const response = await fetch(url);
  const reader = response.body.getReader({ mode: "byob" });
  // read the response
}

getProducts(
  "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
);

Spezifikationen

Specification
Fetch Standard
# ref-for-dom-body-body①

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch