Response: body プロパティ

Baseline 広く利用可能 *

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2019年1月以降、すべてのブラウザーで利用可能です。

* この機能の一部は、対応レベルが異なる場合があります。

もっと詳しく
完全な互換性情報を見る

body は Response インターフェイスの読み取り専用プロパティで、本体コンテンツの ReadableStream です。

値

ReadableStream、または Response オブジェクトが構築時に body プロパティが null であった場合、あるいは HTTP レスポンスに本体がなかった場合には null になります。

ストリームは読み取り可能なバイトストリームで、 ReadableStreamBYOBReader を用いたゼロコピー移譲に対応しています。

メモ: 現在のブラウザーは、本体なしのレスポンス(例えば、 HEAD リクエストに対するレスポンスや、 204 No Content レスポンス)には body プロパティを null に設定するという仕様に実際には適合していません。

例

画像の複製

単純なストリームポンプの例では、画像を読み取り、 response.body を使用してレスポンスのストリームを公開し、ReadableStream.getReader() を使用してリーダーを作成し、そのストリームのチャンクを 2 番目のカスタム読み取り可能なストリームのキューに入れます。画像の同一コピーを効果的に作成します。

const image = document.getElementById("target");
// 元の画像をフェッチ
fetch("./tortoise.png")
 // その body を 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 }) => {
 // データを消費する必要がなくなったら、ストリームを閉じます
 if (done) {
 controller.close();
 return;
 }
 // 次のデータチャンクを対象のストリームのキューに入れます
 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));

BYOB リーダーの作成

この例では、 ReadableStreamBYOBReader を使用して本体から ReadableStream.getReader({mode: 'byob'}) を構築します。このリーダーを使用して、レスポンスデータのゼロコピー移譲を実装することができます。

async function getProducts(url) {
 const response = await fetch(url);
 const reader = response.body.getReader({ mode: "byob" });
 // このレスポンスを読む
}
getProducts(
 "https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/products.json",
);