ReadableStream
readerを通じてデータを非同期的に読み取る
データの供給側
GPT-4.icon
ReadableStreamは、Web Streams APIの一部で、読み取り可能なデータストリームを表現するためのインターフェースです。主に、ネットワークリクエストから取得したデータや、ファイル操作、カスタムデータストリームの作成などに使用されます。
2. 主な用途
ネットワーク通信: Fetch APIで得られるレスポンスボディ（response.body）はReadableStreamのインスタンス。
ファイル操作: ファイルをストリームで少しずつ読み取る。
カスタムデータストリーム: 独自のデータ生成や操作をストリーム形式で行う。
3. ReadableStreamの構成要素
code:javascript
const stream = new ReadableStream({
start(controller) {
// ストリームの初期化
},
pull(controller) {
// ストリームのデータ供給
},
cancel(reason) {
// ストリームがキャンセルされた場合の処理
}
});
start(controller): ストリームが初期化されると呼び出されます。controllerを使ってストリームにデータを供給できます。
pull(controller): ストリームがデータを要求する際に呼び出されます。
cancel(reason): ストリームがキャンセルされた場合のクリーンアップ処理。
controllerはストリームの制御を行うオブジェクトで、以下のようなメソッドを提供します:
enqueue(chunk): ストリームにデータを追加します。
close(): ストリームを閉じます。
error(e): ストリームをエラー状態にします。
4. ストリームの消費
ストリームのデータはReadableStreamから取得できます。
1. 取得方法: getReaderを使用
code:javascript
const reader = stream.getReader();
reader.read().then(({ done, value }) => {
if (done) {
console.log('ストリームが終了しました');
} else {
console.log('データ:', value);
}
});
getReader()はストリームからデータを1つずつ取得するリーダーを返します。
read()はPromiseを返し、データが読み取れると解決します。
2. 取得方法: for await...of
ストリームを非同期イテレータとして扱うこともできます（非同期イテレータがサポートされている環境）。
code:javascript
const reader = stream.getReader();
for await (const chunk of stream) {
console.log('データ:', chunk);
}
---
5. 実例: Fetchとの連携
code:javascript
.then(response => response.body) // bodyはReadableStream
.then(stream => {
const reader = stream.getReader();
return reader.read();
})
.then(({ done, value }) => {
if (!done) {
console.log('データ:', new TextDecoder().decode(value));
}
});