如何在另一个异步函数中执行代码之前等待一个循环在异步函数中完成？

Question

我有一个异步函数，它循环遍历需要上传的文件数组。我有另一个用于最终表单提交的功能，需要等待所有上传完成后再提交表单。

methods: {
async selectFile() {
    for (let i = 0; i < this.Form.PostFiles.length; i++) {
        const File = this.Form.PostFiles[i][0];
        await this.uploadFile(File).then(response => {

        }).catch(error => {
        })

    }
},
async uploadFile(File) {
                const FormFile = new FormData();
                FormFile.append("PostFile", File);

                await this.$axios.post('/api', FormFile).then(response => {
                    console.log("Successfully uploaded")
                }).catch(err => {
                    console.log(err.response.data.error)
                })

      },
async sendForm() {
            const FormBody = new FormData();
            FormBody.append("Name", this.Form.Name);
            FormBody.append("Description", this.Form.Description);
            // Here I need to wait for all files to upload first!
            await this.selectFile; // But this fulfills on first iteration of for loop
            // If all files uploaded then post the form
            await this.$axios.post('/api', FormBody)
      }
}

上面代码的问题是，只要selectFile() 中的for 循环的一次迭代完成，sendForm() 中的await this.selectFile 部分就会被执行。我需要等到所有文件都上传完...那么如何让sendForm() 中的await selectFile 等待整个循环完成？

似乎for 循环需要包装在某些东西中，然后返回一个值，指示sendForm 它可以继续发送表单。我只是无法理解这是如何完成的。

Answer 1

如果你像这样改变你的方法，那应该会按预期工作：

async selectFile() {
  await Promise.all(
      this.Form.PostFiles.map(async(el, i) => {
         const File = this.Form.PostFiles[i][0];
         await this.uploadFile(File)             
    })
  );
}