javascript基础从小白到高手系列一百八十八：流解码

TextDecoderStream 其实就是TransformStream 形式的TextDecoder。将编码后的文本流通
过管道输入流解码器会得到解码后文本块的流：
async function* chars() {
// 每个块必须是一个定型数组
const encodedText = [102, 111, 111].map((x) => Uint8Array.of(x));
for (let char of encodedText) {
yield await new Promise((resolve) => setTimeout(resolve, 1000, char));
}
}
const encodedTextStream = new ReadableStream({
async start(controller) {
for await (let chunk of chars()) {
controller.enqueue(chunk);
}
controller.close();
}
});
const decodedTextStream = encodedTextStream.pipeThrough(new TextDecoderStream());
const readableStreamDefaultReader = decodedTextStream.getReader();
(async function() {
while(true) {
const { done, value } = await readableStreamDefaultReader.read();
if (done) {
break;
} else {
console.log(value);
}
}
})();
// f
// o
// o
文本解码器流能够识别可能分散在不同块上的代理对。解码器流会保持块片段直到取得完整的字
符。比如在下面的例子中，流解码器在解码流并输出字符之前会等待传入4 个块：
async function* chars() {
// ☺的UTF-8 编码是0xF0 0x9F 0x98 0x8A（即十进制240、159、152、138）
const encodedText = [240, 159, 152, 138].map((x) => Uint8Array.of(x));
for (let char of encodedText) {
yield await new Promise((resolve) => setTimeout(resolve, 1000, char));
}
}
const encodedTextStream = new ReadableStream({
async start(controller) {
for await (let chunk of chars()) {
controller.enqueue(chunk);
}
controller.close();
}
});
const decodedTextStream = encodedTextStream.pipeThrough(new TextDecoderStream());
const readableStreamDefaultReader = decodedTextStream.getReader();
(async function() {
while(true) {
const { done, value } = await readableStreamDefaultReader.read();
if (done) {
break;
} else {
console.log(value);
}
}
})();
// ☺
文本解码器流经常与fetch()一起使用，因为响应体可以作为ReadableStream 来处理。比如：
const response = await fetch(url);
const stream = response.body.pipeThrough(new TextDecoderStream());
const decodedStream = stream.getReader()
for await (let decodedChunk of decodedStream) {
console.log(decodedChunk);
}