使用 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: [] }。数组看起来是空的，但是当我展开它时，我可以看到正确的完整数组……
• 如果我将此数据传递给请求，它会告诉我我的数组肯定是空的。不应该等待所有的承诺完成吗？

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

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);
  }
},