Response.body

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

構文

response.body;

ReadableStream です。

単純なストリームポンプの例では、画像を読み取り、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));

仕様書

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報