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