ReadableStream

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

ReadableStream は移譲可能オブジェクトです。

コンストラクター

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

プロパティ

ReadableStream.locked 読取専用: 論理値で、読み取り可能なストリームがリーダーにロックされているかどうかを返します。

メソッド

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

例

ストリームのフェッチ

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

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

fetch('https://www.example.org')
  .then((response) => response.body)
  .then((rb) => {
    const reader = rb.getReader();

    return new ReadableStream({
      start(controller) {
        // 次の関数は各データチャンクを処理します
        function push() {
          // done は論理値で、value は Uint8Array です
          reader.read().then(({ done, value }) => {
            // 読み取るデータはもうありませんか？
            if (done) {
              // データの送信が完了したことをブラウザーに伝えます
              controller.close();
              return;
            }
            // データを取得し、コントローラー経由でブラウザーに送信します
            controller.enqueue(value);
            // コンソールにログを出力してチャンクを調べる
            console.log(done, value);
            push();
          });
        }

        push();
      },
    });
  })
  .then((stream) =>
    // ストリームで応答する
    new Response(stream, { headers: { 'Content-Type': 'text/html' } }).text()
  )
  .then((result) => {
    // Do things with result
    console.log(result);
  });

非同期反復子をストリームへ変換

（非同期）反復子を読み取り可能なストリームへ変換します。

function iteratorToStream(iterator) {
  return new ReadableStream({
    async pull(controller) {
      const { value, done } = await iterator.next();

      if (done) {
        controller.close();
      } else {
        controller.enqueue(value);
      }
    },
  });
}

これは、反復子が非同期でも非同期でなくても動作します。

仕様書

Specification
Streams Standard # rs-class

ブラウザーの互換性

BCD tables only load in the browser