javascript中的fileReader是异步还是同步?

javascript中的fileReader是异步还是同步?,javascript,asynchronous,dom,filereader,Javascript,Asynchronous,Dom,Filereader,我正在使用excel clone,并使用以下代码实现了在web上打开excel工作表的功能,但我不太了解代码的内部内容,因为我是javascript新手。因此,请帮助我了解代码。 我的代码是- <input type="file" onchange="readFile(this)"> <script> function readFile(input) { let file = input.files[0]; let re

我正在使用excel clone,并使用以下代码实现了在web上打开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>

函数读取文件(输入){
让file=input.files[0];
let reader=new FileReader();
reader.readAsText(文件);
reader.onload=函数(){
console.log(reader.result);
};
reader.onerror=函数(){
console.log(reader.error);
};
}
这非常有效,但我不了解它的异步性质,因为我知道onLoad有点像addeventListener,它将在浏览器API中运行,因此当负载发生变化时,它将启动回调函数

但是reader.readAsText(文件)呢

我的猜测是它正在异步读取文件,但如果它正在以异步方式读取文件,为什么它没有附加回调函数,该函数将在它完成读取文件后运行,如fs modules fileread()函数中所示,在该函数中,我们有一个特定的回调来知道现在文件读取已完成或失败


因此,请帮助我理解reader.readAsText(文件)是如何异步的,以及它是不是异步的,或者只是我完全混淆了两种不同的场景。

如果您查看此API的MDN文档,您将看到您可以处理的不仅仅是
onload
onerror
事件,例如
onprogress
。如果
readAsText
方法采用回调参数,那么该回调将如何处理所有这些潜在事件?什么时候应该调用该回调?这个回调会被多次调用吗?

现在,当我们在blob上有了新的读取方法时,FileReader没有什么好处(你只需要在IE上使用它,而IE现在基本上已经死了)

如果要读取二进制(excel)文件(而不是ascii文本文件),则无法将内容读取为文本,b/c会发生一些编码转换,使字符串无效,因此实际上应将其读取为arrayBuffer

一种异步但感觉同步的现代方法如下所示:

异步函数读取文件(输入){ const[file]=input.files 如果(!file)返回//以防输入被清除 const buffer=await file.arrayBuffer() const uint8=新uint8阵列(a) } (代码更少,没有回调,仍然是异步的) (由于在Deno和NodeJS服务器上都增加了更广泛的平台支持,因此最好使用新的read-on-Blob)

  • readAsText(文件)是一种同步代码执行
    • 因此,
      readAsText
      之后的代码实际上将在
      reader之前运行。正在调用onload
  • readAsText
    将启动另一个代码执行,并在发生其他事情时调用其他函数
它只是在内部以另一种方式构造,而不是使用传统的回调函数,您必须在某个类实例上注册您感兴趣的函数。FileReader有多个“回调”函数(又名:eventlistener),可以在延迟后调用,您不需要向所有函数添加eventlistener

  • onabort:(…)
  • onerror:(…)
  • 加载:(…)
  • onloadend:(…)
  • onloadstart:(…)
  • 进展情况:(……)
如果您只需要其中一个或两个(例如:onload和onprogress),那么就不必为它们中的每一个应用参数:
readAsText(file,…noopFn,loadCallback,…noopFn,progressCallback)

旧的
XMLHttpRequest
ajax方法也是如此 当它返回响应时,您不需要添加回调,您可以侦听中止、错误、超时、下载和上载进度、状态更改(当请求已打开并发送时,接收响应头和正文)

只是b/c它没有回调函数,并不意味着某些东西是异步或同步的。延迟定义了异步

我的意思是,
[]
所以那些
setTimeout(callbackFn,1000)
但是这是异步的

使某些函数逻辑异步的部分原因是当其他函数正在执行/或继续时(在迭代器和生成器的情况下)。。。问题是:它是立即调用还是延迟调用?
readAsText
是同步的,但是获取文件内容的“逻辑”是异步的

换句话说,如果某个函数没有在同一台计算机上执行,那么它被认为是异步的

这是从哪里来的


还有一件事,FileReader实例可以多次重用,这样您就不必一次又一次地清除相同的错误/回调函数 你不能像它已经在读东西一样同时使用它。
这也是readAsText中没有任何回调参数的原因之一

您应该能够轻松阅读浏览器方法的文档,例如thanky u for your response.thanky u for your response。但这仍然不能消除我对异步本质的困惑。您提到的代码只是在异步函数中使用带有wait关键字的promise,但我的问题是为什么readAsText没有回调,因为它是一个异步函数?好吧,readText是异步的,但因为我们有这么多事件处理程序,所以为readAsText提供一个回调不是明智的选择??对不对,从一开始就不是这样设计的。谢谢你添加了最后一点。事件处理程序的分配是针对实例的,而不是针对任何特定的方法调用。感谢Man编写了如此详细的解释,我现在完全明白了,我完全明白了你的解释,除了“readAsText是同步的,但“logic”