Response: Eigenschaft body

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 schreibgeschützte body Eigenschaft der Response-Schnittstelle ist ein ReadableStream der Körperinhalte.

Wert

Ein ReadableStream oder [null](/de/docs/Web/JavaScript/Reference/Operators/null) für jedes Response-Objekt, das mit einer null body-Eigenschaft konstruiert wurde, oder für jede tatsächliche HTTP-Antwort, die keinen Körper hat.

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

Hinweis: Aktuelle Browser entsprechen nicht der Spezifikation, die vorschreibt, die body-Eigenschaft auf null zu setzen für Antworten ohne Körper (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 fügen dann die Chunks des Streams in einen zweiten, benutzerdefinierten lesbaren Stream ein — dabei wird effektiv eine identische Kopie des Bildes erstellt.

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 Körper mit ReadableStream.getReader({mode: 'byob'}). Wir können diesen Leser dann verwenden, um den 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