Javascript 使用Vuejs和FileReader在异步循环中创建JSON数据时出现问题

我有一个vue表单组件，用户可以为其提交多个文件。在将数据提交到接收JSON数据的远程API之前，我需要处理这些文件

我已尝试使用FileReader和异步foreach循环解决此问题，如下所示：

方法：{
readerLoaded（geojson、日期、post_数据）{
post_data.dated_profiles.push({
“日期”：日期，
“geojson”：geojson
});
},
setupReader（文件、日期、post_数据、readerLoaded）{
var reader=new FileReader（）；
reader.onload=函数（e）{
const result=JSON.parse（e.target.result）；
//将结果发送到回调
readerLoaded（结果、日期、post_数据）；
};
reader.readAsText（文件）；
},
验证（）{
if（此.$refs.form.validate（））{
/*处理GeoJSON文件以将数据发布到API*/
常数数据={
“name”：this.name，
“index”：this.index，
“日期_配置文件”：数组（）
}
const asyncLoopFunction=async（数据集、post_数据、setupReader、readerLoaded）=>{
const promises=datasets.map（函数（项）{返回setupReader（item.file，item.date，post_数据，readerload）；}）
返回等待承诺。全部（承诺）
}
asyncLoopFunction（this.datasets，data，this.setupReader，this.readerLoaded）。然后（（）=>{
console.log（'All async tasks complete！'）
log（“异步之后”，数据）
此.$store.dispatch（'postProfile'，data）
});
}
}

问题是：当我将最后一个JSON数据对象传递给Vuex store action时（使用

dispatch

），我的

dated_profiles

数组是空的

• 如果我在异步循环完成后检查JSON对象，浏览器控制台会显示这个

  对象{name:“foo”，index:“1”，dated_profiles:[]}

  。数组看起来是空的，但当我展开它时，我可以看到正确的完整数组
• 如果我将此数据传递给请求，它会告诉我我的数组肯定是空的。它不应该等待所有承诺完成吗

---

我不明白为什么我的async/await组合不起作用，我错在哪里？

您正在将

此.setup\u reader

传递到

asyncLoopFunction

。我认为应该是

此.setupReader

此外，您的

setupReader

方法当前未返回承诺。您应该将其更改为：

setupReader(file, date, post_data, readerLoaded) {
  return Promise((resolve, reject) => {
    var reader = new FileReader();
    reader.onload = function(e) {
      const result = JSON.parse(e.target.result);
      readerLoaded(result, date, post_data);
      resolve();
    };
    reader.onerror = () => reject();
    reader.readAsText(file);
  }
},

---

至于函数名，这是我帖子中的一个错误，我已经更新了它！谢谢你的回复，我想我不明白FileReader/async循环与承诺是如何工作的。如果我错了，请告诉我：因为setupReader没有返回任何内容，等待是没有用的，在填充数组之前所有内容都完成了，对吗？没有。

async

不是无用的。但是如果您不将承诺馈送到

Promise.all（）

数组，它将在函数执行时立即解析（同步）。例如，现在，它们是承诺，如果删除

async

它将不起作用。您需要它。