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

Question

我有一个 vue 表单组件，用户可以为其提交多个文件。我需要先处理这些文件，然后再将数据提交到采用 JSON 数据的远程 API。

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

methods: {
readerLoaded(geojson, date, post_data) {
post_data.dated_profiles.push({
'date': date,
'geojson': geojson
});
},
setupReader(file, date, post_data, readerLoaded) {
var reader = new FileReader();
reader.onload = function(e) {
const result = JSON.parse(e.target.result);
// Send result to callback
readerLoaded(result, date, post_data);
};
reader.readAsText(file);
},
validate() {
if ( this.$refs.form.validate() ) {
/* Process GeoJSON files to POST data to API */
const data = {
'name': this.name,
'index': this.index,
'dated_profiles': Array()
}
const asyncLoopFunction = async (datasets, post_data, setupReader, readerLoaded) => {
const promises = datasets.map(function (item) { return setupReader(item.file, item.date, post_data, readerLoaded); })
return await Promise.all(promises)
}
asyncLoopFunction(this.datasets, data, this.setupReader, this.readerLoaded).then( () => {
console.log('All async tasks complete!')
console.log("After async", data)
this.$store.dispatch('postProfile', data)
});
}
}

问题是：当我将我的最后一个 JSON 数据对象传递给 Vuex 存储操作(使用dispatch(时，我的dated_profiles数组为空。

• 如果我在异步循环完成后检查 JSON 对象，浏览器控制台会显示此Object { name: "foo", index: "1", dated_profiles: [] }。数组看起来是空的，但是当我展开它时，我可以看到正确的完整数组......
• 如果我将此数据传递给请求，它会告诉我我的数组肯定是空的。难道不应该等待所有的承诺完成吗？

我不明白为什么我的异步/等待组合不起作用，我错在哪里？

Answer 1

您正在将this.setup_reader传递给asyncLoopFunction。我相信应该是this.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);
}
},