Body.body

Body ミックスインの body 読み取り専用プロパティは、ボディコンテンツの ReadableStream を公開するために使用する単純なゲッターです。

構文

var stream = 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));

仕様

ブラウザーの互換性

関連情報

• Fetch API
• Streams API
• ServiceWorker API