ReadableStream

Streams API の ReadableStream インターフェイスは、バイトデータの読み取り可能なストリームを表します。 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 と組み合わせた 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" } });
});

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