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.
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.
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