Response.body

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

値

ReadableStream、または body プロパティが null で構築された Response オブジェクト、あるいは本体を持たない実際の HTTP レスポンスに対しては null です。

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

例

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

js

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));

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報