vue循环等待函数完成的方法

Question

在这个vue组件中，我有一个包含for循环的方法，调用另一个方法。第二种方法向应用服务器发出请求。我需要第一个函数等待第二个函数继续 for 循环。我已经尝试了几个异步等待选项，但不明白如何实现它。

methods: {
selectFiles(files) {
  this.progressInfos = [];
  this.selectedFiles = files;
},
uploadFiles() {
  this.message = "";
  //var result = 0;
  for (let i = 0; i < this.selectedFiles.length; i++) {
    console.log(i)
    //result = await this.upload(i, this.selectedFiles[i]);
    this.upload(i, this.selectedFiles[i]);
  }
},
upload(idx, file) {
  this.progressInfos[idx] = { percentage: 0, fileName: file.name };
  //console.log("FinDocuNum:" + financialDocument.finDocId)
  FinancialDocumentDataService.upload(1, file, (event) => {
    this.progressInfos[idx].percentage = Math.round(100 * event.loaded / event.total);
  }).then((response) => {
      let prevMessage = this.message ? this.message + "\n" : "";
      this.message = prevMessage + response.status;
      return 1;
  }).catch(() => {
      this.progressInfos[idx].percentage = 0;
      this.message = "Could not upload the file:" + file.name;
      return 0;
    });
}

}

Answer 1

上传功能必须是异步的并且return这样的承诺：

async upload(file) {
    return new Promise((resolve, reject) => {

        axios({url: url, data: file, method: 'POST'})
            .then(resp => {
                resolve(resp)
            })
            .catch(err => {
                reject(err)
            })
    })
},

vue循环等待函数完成的方法

vue method for loop wait for function complete

for-loop

async-await

vue.js