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" } });
});
仕様
仕様 | 状態 | コメント |
---|---|---|
Streams ReadableStream の定義 |
現行の標準 | 初期定義 |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- WHATWG Stream Visualiser: 読み取り可能なストリーム、書き込み可能なストリーム、および変換ストリームの基本的な視覚化。