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));
});
const decodedTextStream = encodedTextStream.pipeThrough(new TextDecoderStream()); 24 const readableStreamDefaultReader = decodedTextStream.getReader();

Encoding API

   for (let char of encodedText) {
yield await new Promise((resolve) => setTimeout(resolve, 1000, char)); 21
} }
const encodedTextStream = new ReadableStream({
  async start(controller) {
    for await (let chunk of chars()) {
      controller.enqueue(chunk);
}
    controller.close();
  }
   (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);
}

File API 与 Blob API

Web 应用程序的一个主要的痛点是无法操作用户计算机上的文件。2000 年之前，处理文件的唯一方 式是把放到一个表单里，仅此而已。File API 与 Blob API 是为了让 Web 开发者 能以安全的方式访问客户端机器上的文件，从而更好地与这些文件交互而设计的。

File类型

File API 仍然以表单中的文件输入字段为基础，但是增加了直接访问文件信息的能力。HTML5 在 DOM 上为文件输入元素添加了 files 集合。当用户在文件字段中选择一个或多个文件时，这个 files 集合中会包含一组 File 对象，表示被选中的文件。每个 File 对象都有一些只读属性。
 name:本地系统中的文件名。
 size:以字节计的文件大小。
 type:包含文件 MIME 类型的字符串。
 lastModifiedDate:表示文件最后修改时间的字符串。这个属性只有 Chome 实现了。 例如，通过监听 change 事件然后遍历 files 集合可以取得每个选中文件的信息:

   let filesList = document.getElementById("files-list");
    filesList.addEventListener("change", (event) => {
      let files = event.target.files,
          i = 0,
          len = files.length;
      while (i < len) {
        const f = files[i];
        console.log(`${f.name} (${f.type}, ${f.size} bytes)`);
        i++;
} });

这个例子简单地在控制台输出了每个文件的信息。仅就这个能力而言，已经可以说是 Web 应用向 前迈进的一大步了。不过，File API 还提供了 FileReader 类型，让我们可以实际从文件中读取数据。