ReadableStream

Streams APIReadableStream インターフェイスは、バイトデータの読み取り可能なストリームを表します。 Fetch API は、Response オブジェクトの body プロパティを介して ReadableStream の具体的なインスタンスを提供します。

コンストラクター

ReadableStream()
指定されたハンドラーから読み取り可能なストリームのオブジェクトを作成して返します。

プロパティ

ReadableStream.locked 読取専用
locked ゲッターは、読み取り可能なストリームがリーダーにロックされている(英語)かどうかを返します。

メソッド

ReadableStream.cancel()
ストリームをキャンセルし、コンシューマーがストリームに興味を失ったことを通知します。 提供された reason 引数は、基になるソースに与えられ、使用する場合と使用しない場合があります。
ReadableStream.getReader()
リーダーを作成し、ストリームをロックします。 ストリームがロックされている間は、このリーダーが開放されるまで他のリーダーを取得できません。
ReadableStream.pipeThrough()
変換ストリームまたはその他の書き込み可能/読み取り可能なペアを介して、現在のストリームをパイプ接続するチェーン可能な方法を提供します。
ReadableStream.pipeTo()
現在の ReadableStream を特定の WritableStream にパイプし、パイピングプロセスが正常に完了したときに満たす promise を返します。 エラーが発生した場合は拒否します。
ReadableStream.tee()
tee メソッドは、この読み取り可能なストリームを tee し、結果の2つの分岐を含む2要素配列を新しい ReadableStream インスタンスとして返します。 これらの各ストリームは、同じ着信データを受信します。

次の例では、別のリソースからフェッチした HTML の断片をブラウザーにストリーミングするために、人工的な Response が作成されます。

これは Uint8Array (en-US) と組み合わせた ReadableStream の使用方法を示しています。

fetch("https://www.example.org/").then((response) => {
  const reader = response.body.getReader();
  const stream = new ReadableStream({
    start(controller) {
      // 次の関数は各データチャンクを処理します
      function push() {
        // done は Boolean で、value は Uint8Array です
        reader.read().then(({ done, value }) => {
          // 読み取るデータはもうありませんか?
          if (done) {
            // データの送信が完了したことをブラウザーに伝えます
            controller.close();
            return;
          }

          // データを取得し、コントローラー経由でブラウザーに送信します
          controller.enqueue(value);
          push();
        });
      };

      push();
    }
  });

  return new Response(stream, { headers: { "Content-Type": "text/html" } });
});

仕様

仕様 状態 コメント
Streams
ReadableStream の定義
現行の標準 初期定義

ブラウザーの互換性

BCD tables only load in the browser

関連情報

  • WHATWG Stream Visualiser: 読み取り可能なストリーム、書き込み可能なストリーム、および変換ストリームの基本的な視覚化。