为了账号安全,请及时绑定邮箱和手机立即绑定

在 Promise 和 Async Await 中使用 FileReader 时遇到问题

在 Promise 和 Async Await 中使用 FileReader 时遇到问题

饮歌长啸 2021-10-21 14:23:04
我的页面有一个按钮可以上传 csv 并执行 Promise,但是 (1) 我的 async-await 函数在页面加载时立即触发,而不是等到我的 Promise 触发,以及 (2) 当我上传文件时,似乎什么都没有进入我的异步等待和 (3) 当我 console.log 我的解决和拒绝操作时, reader.onload 和 reader.onerror 都在执行!我已经尝试了所有我能想到的方法并通读了所有相关的帖子。<!DOCTYPE html><html><head><meta charset="UTF-8"><style> body {font-family: Arial, Helvetica, sans-serif;}</style></head><input type="file" name="File Upload" id="txtFileUpload" accept=".csv" /><script>document.getElementById('txtFileUpload').addEventListener('change', upload, false);//work through this, then post a question to StackExchange//https://stackoverflow.com/questions/51026420/filereader-readastext-async-issuesfunction upload(evt) {  return new Promise(function(resolve, reject) {    file = evt.target.files[0];    reader = new FileReader();    reader.readAsText(file);    reader.onload = function() {      resolve(event)    }; //reader.onload = console.log(event);    reader.onerror = function() {      reject(error)    }; //reader.onerror = console.log(event);  });}async function msg(event) {  try {    msg = await upload();    console.log(msg);  } catch (err) {    console.log('loading error occurred');  }}msg();</script></body></html><!--Some data for the .csv file--><!--"film_id","title","description","release_year","rental_rate","length","rating""1","ACADEMY DINOSAUR","A Epic Drama of a Feminist And a Mad Scientist who must Battle a Teacher in The Canadian Rockies","2006","0.99","86","PG""299","FACTORY DRAGON","A Action-Packed Saga of a Teacher And a Frisbee who must Escape a Lumberjack in The Sahara Desert","2006","0.99","144","PG-13""345","GABLES METROPOLIS","A Fateful Display of a Cat And a Pioneer who must Challenge a Pastry Chef in A Baloon Factory","2006","0.99","161","PG""391","HALF OUTFIELD","A Epic Epistle of a Database Administrator And a Crocodile who must Face a Madman in A Jet Boat","2006","2.99","146","PG-13"-->
查看完整描述

3 回答

?
守着一只汪

TA贡献1872条经验 获得超3个赞

你的问题是你没有把eventanderror作为论点,所以这些将是undefined.


所以那个代码:


reader.onload = function() {

  resolve(event)

}; 

reader.onerror = function() {

  reject(error)

};

应该:


reader.onload = function(event) {

  resolve(event)

}; 

reader.onerror = function(error) {

  reject(error)

};

或者,更简单:


reader.onload = resolve

reader.onerror = reject


查看完整回答
反对 回复 2021-10-21
?
HUH函数

TA贡献1836条经验 获得超4个赞

除了@FZs 指出的之外,我想知道您为什么msg();在脚本末尾调用。如果您希望使用它来获取任何上传的消息,那将无法正常工作。它只是在等待一个从未得到event永远无法解决的值的承诺。

另一个小问题是<body>您的<head>部分之后没有开始标签。大多数浏览器可能会让您逃脱惩罚,但无论如何您都应该修复它。


查看完整回答
反对 回复 2021-10-21
?
慕虎7371278

TA贡献1802条经验 获得超4个赞

我只是在这个例子中错误地使用了 Promise。不需要 Promise 或 Async-Await,因为 onload 函数提供了回调功能。只是想向其他初学者指出我的问题从根本上被混淆了,所以这篇文章对任何人都没有帮助。我会删除帖子,但显然这最终会导致无法发布。


查看完整回答
反对 回复 2021-10-21
  • 3 回答
  • 0 关注
  • 413 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信