ReadableStreamDefaultReader: read() ã¡ã½ãã
Baseline
åºãå©ç¨å¯è½
ãã®æ©è½ã¯åºãå®è£ ããã¦ãããå¤ãã®ãã¼ã¸ã§ã³ã®ç«¯æ«ããã©ã¦ã¶ã¼ã§åä½ãã¾ãã2020å¹´1æä»¥éããã¹ã¦ã®ãã©ã¦ã¶ã¼ã§å©ç¨å¯è½ã§ãã
read() 㯠ReadableStreamDefaultReader ã¤ã³ã¿ã¼ãã§ã¤ã¹ã®ã¡ã½ããã§ãã¹ããªã¼ã ã®å
é¨ãã¥ã¼å
ã®æ¬¡ã®ãã£ã³ã¯ã¸ã®ã¢ã¯ã»ã¹ãæä¾ãããããã¹ãè¿ãã¾ãã
æ§æ
read()
弿°
ãªãã
è¿å¤
Promise ã§ããã¹ããªã¼ã ã®ç¶æ
ã«å¿ãã¦ãçµæã«ã¦å±¥è¡ã¾ãã¯æå¦ããã¾ãã
ããããç¶æ³ãã®ã¯æ¬¡ã®éãã§ãã
- ãã£ã³ã¯ã使ç¨å¯è½ãªå ´åããããã¹ã
{ value: theChunk, done: false }ã®å½¢å¼ã®ãªãã¸ã§ã¯ãã§å±¥è¡ããã¾ãã - ã¹ããªã¼ã ãéããããã¨ããããã¹ã
{ value: undefined, done: true }ã¨ããå½¢å¼ã®ãªãã¸ã§ã¯ãã§å±¥è¡ããã¾ãã - ã¹ããªã¼ã ãã¨ã©ã¼ã«ãªãã¨ããããã¹ãé¢é£ããã¨ã©ã¼ã§ãããã¹ãæå¦ããã¾ãã
ä¾å¤
TypeError-
ã½ã¼ã¹ãªãã¸ã§ã¯ãã
ReadableStreamDefaultReaderã§ã¯ãªãããã¹ããªã¼ã ã«ææè ããã¾ããã
ä¾
>ä¾ 1 - ç°¡åãªä¾
ãã®ä¾ã¯ãåºæ¬ç㪠API ã®ä½¿ç¨æ¹æ³ã示ãã¦ãã¾ãããä¾ãã°ãè¡ã®å¢çã§çµäºããªãã¹ããªã¼ã ãã£ã³ã¯ãªã©ã®è¤éãªåé¡ã«ã¯å¯¾å¦ãã¾ããã
ãã®ä¾ã§ã¯ãstream ã¯ä»¥åã«ä½æããã«ã¹ã¿ã ã® ReadableStream ã§ãã getReader() ã使ç¨ãã¦ä½æãã ReadableStreamDefaultReader ã使ç¨ãã¦èªã¿åãã¾ãï¼å®å
¨ãªã³ã¼ãã«ã¤ãã¦ã¯ãåç´ãªã©ã³ãã ã¹ããªã¼ã ã®ä¾ãåç
§ï¼ã åãã£ã³ã¯ãé çªã«èªã¿åããã¹ããªã¼ã ã®èªã¿åããå®äºããã¾ã§ UTF-8 ã®ãã¤ãã®é
åã¨ã㦠UI ã«åºåãã¾ãã ã¹ããªã¼ã ã®èªã¿åããå®äºããã¨ãå台颿°ããæ»ããã¹ããªã¼ã å
¨ä½ã UI ã®å¥ã®é¨åã«åºåãã¾ãã
function fetchStream() {
const reader = stream.getReader();
let charsReceived = 0;
// read() ã¯ãå¤ãåãåã£ãã¨ãã«è§£æ±ºãã promise ãè¿ãã¾ã
reader.read().then(function processText({ done, value }) {
// çµæãªãã¸ã§ã¯ãã«ã¯2ã¤ã®ããããã£ãå«ã¾ãã¾ã
// done - ã¹ããªã¼ã ããã¹ã¦ã®ãã¼ã¿ãæ¢ã«æä¾ãã¦ããå ´å㯠true
// value - ä¸é¨ã®ãã¼ã¿ã done ã true ã®å ´åã常㫠undefined
if (done) {
console.log("Stream complete");
para.textContent = result;
return;
}
// ãã§ããããã¹ããªã¼ã ã®å¤ã¯ Uint8Array ã§ã
charsReceived += value.length;
const chunk = value;
let listItem = document.createElement("li");
listItem.textContent = `Received ${charsReceived} characters so far. Current chunk = ${chunk}`;
list2.appendChild(listItem);
result += chunk;
// ããã«èªã¿ããã®é¢æ°ãå度å¼ã³åºãã¾ã
return reader.read().then(processText);
});
}
ä¾ 2 - ããã¹ãã 1 è¡ãã¤å¦çãã
ãã®ä¾ã¯ãããã¹ããã¡ã¤ã«ããã§ããããããã¹ãè¡ã®ã¹ããªã¼ã ã¨ãã¦å¦çããæ¹æ³ã示ãã¦ãã¾ãã è¡ã®å¢çã§çµäºãããUint8Array ããæååã«å¤æããã¹ããªã¼ã ãã£ã³ã¯ãå¦çãã¾ãã
async function* makeTextFileLineIterator(fileURL) {
const utf8Decoder = new TextDecoder("utf-8");
let response = await fetch(fileURL);
let reader = response.body.getReader();
let { value: chunk, done: readerDone } = await reader.read();
chunk = chunk ? utf8Decoder.decode(chunk, { stream: true }) : "";
let re = /\r\n|\n|\r/gm;
let startIndex = 0;
for (;;) {
let result = re.exec(chunk);
if (!result) {
if (readerDone) {
break;
}
let remainder = chunk.substr(startIndex);
({ value: chunk, done: readerDone } = await reader.read());
chunk =
remainder + (chunk ? utf8Decoder.decode(chunk, { stream: true }) : "");
startIndex = re.lastIndex = 0;
continue;
}
yield chunk.substring(startIndex, result.index);
startIndex = re.lastIndex;
}
if (startIndex < chunk.length) {
// æå¾ã®è¡ã¯æ¹è¡æåã§çµãã£ã¦ãã¾ãã
yield chunk.substr(startIndex);
}
}
for await (let line of makeTextFileLineIterator(urlOfFile)) {
processLine(line);
}
仿§æ¸
| 仿§æ¸ |
|---|
| Streams > # ref-for-default-reader-readâ > |
ãã©ã¦ã¶ã¼ã®äºææ§
é¢é£æ å ±
ReadableStreamDefaultReader()ã³ã³ã¹ãã©ã¯ã¿ã¼- èªã¿åãå¯è½ãªã¹ããªã¼ã ã®ä½¿ç¨