时间戳

首页 > 解决方案 > javascript异步或同步中的fileReader？

javascript - javascript异步或同步中的fileReader？

问题描述

我正在研究 excel 克隆，并使用以下代码实现了在网络上打开 excel 表的功能，但我不太了解代码的内部，因为我是 javascript 的新手。所以请帮助我了解代码。我的代码是 -

<input type="file" onchange="readFile(this)">

<script>
function readFile(input) {
  let file = input.files[0];

  let reader = new FileReader();

  reader.readAsText(file);

  reader.onload = function() {
    console.log(reader.result);
  };

  reader.onerror = function() {
    console.log(reader.error);
  };

}
</script>

这很有用，但我没有得到它的异步性质，因为我知道 onLoad 是一种 addeventListener ，它将在浏览器 API 中运行，因此当负载发生变化时，它将触发回调函数。

但是 reader.readAsText(file) 呢？

我的猜测是它正在异步读取文件，但是如果它以异步方式读取文件，为什么没有附加到它的回调函数将在它完成读取文件后运行，如我们在 fs 模块 fileread() 函数中看到的那样有一个特定的回调来知道现在文件读取是完成还是失败。

所以请帮助我了解 reader.readAsText(file) 这是如何异步的，以及它是否是异步的，或者只是我完全混淆了两种不同的场景。

标签： javascriptasynchronousdomfilereader

解决方案

如今，当我们在 blob 上有新的读取方法时，FileReader 现在几乎没有什么好处（您只需要 IE 来使用它 - 现在几乎已经死了）

如果您要读取二进制（excel）文件（而不是 ascii 文本文件），那么您无法将内容作为文本读取，b/c 会发生一些编码转换并使字符串无效，因此您应该实际阅读它作为arrayBuffer

一种异步但感觉同步的现代方法看起来像这样：

async function readFile (input) {
  const [file] = input.files
  if (!file) return // in case input have been cleared

  const buffer = await file.arrayBuffer()
  const uint8 = new Uint8Array(a)
}

（更少的代码，没有回调，并且仍然是异步的）（在 blob 上使用新的读取是首选，因为它在 Deno 和 NodeJS 服务器上增加了更广泛的平台支持）

推荐阅读