バイトデータの読み取り可能なストリームを表します。→●、MS

Streams API の ReadableStream インターフェイス。

Fetch API は、Response オブジェクトの body プロパティを介して ReadableStream の具体的なインスタンスを提供します。

コンストラクター

readableStream=new ReadableStream(underlyingSource[, queuingStrategy])

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

プロパティ

Boolean=ReadableStream.locked 読取専用

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

メソッド

promise = readableStream.cancel(reason)

ストリームをキャンセルし、コンシューマーがストリームに興味を失ったことを通知します。提供された reason 引数は、基になるソースに与えられ、使用する場合と使用しない場合があります。

reader = readableStream.getReader({mode})

リーダーを作成し、ストリームをロックします。ストリームがロックされている間は、このリーダーが開放されるまで他のリーダーを取得できません。

transformedStream = readableStream.pipeThrough(transformStream[, options])

変換ストリームまたはその他の書き込み可能/読み取り可能なペアを介して、現在のストリームをパイプ接続するチェーン可能な方法を提供します。

promise = readableStream.pipeTo(destination[, options])

現在の ReadableStream を特定の WritableStream にパイプし、パイピングプロセスが正常に完了したときに満たす promise を返します。 エラーが発生した場合は拒否します。

teedStreams = readableStream.tee()

tee メソッドは、この読み取り可能なストリームを tee し、結果の2つの分岐を含む2要素配列を新しい ReadableStream インスタンスとして返します。これらの各ストリームは、同じ着信データを受信します。

for await (const chunk of stream) { ... }
for await (const chunk of stream.values({ preventCancel: true })) { ... }

当のストリームの内部 queue 内にあるチャンクたちを非同期的に反復する。

当のストリームを非同期的に反復する間は、他の消費器が読み取り器を獲得できないよう、ストリームはロックされることになる。このロックは、非同期反復子の return() メソッドが call されたとき、解放されることになる ― 例： for ループから break して出ることにより。

既定では、非同期反復子の return() メソッドを call すると、当のストリームも取り消すことになる。これを防止するには、ストリームの values() メソッドを ― その preventCancel オプションに true を渡して ― 利用する。

destination.postMessage(rs, { transfer: [rs] });→●

ReadableStream を別の［フレーム／window／worker］へ送信する。

転送されたストリームは、元のストリームとまったく同じに利用できる。以降、元のストリームはロックされ，利用不能になる。

¶他を省く

例

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" } });
});

テスト