如何在 Angular 中使用 async 和 await 来等待函数完成，然后再执行函数的其余部分？

Question

我正在尝试在将记录保存到数据库之前上传图像。我需要在保存记录之前完成上传：

负责图片上传的函数：

  async uploadTrainingModule(selectedFiles: any = this.files) {
    // Perform Image Upload
    for (let i = 0; i < selectedFiles.length; i++) {
      await this.filesUploaded.push(selectedFiles[i]);
    }
  }

在上面的方法中使用了async和await，我希望在下面的方法中执行其他任何事情之前让该方法完成（这是负责写入DB的方法）：

 createTrainingModule() {
    this.uploadTrainingModule().then(resp => {
        // Upload to DB code below
    })
  }

我的目标是仅在 uploadTrainingModule 方法完全完成后才执行注释下方的代码，但是，我上面所做的不起作用？我可以采取什么方法？

Answer 1

您可以通过以下步骤使用RxJS 函数来实现：

• 使用forkJoin将所有上传函数与一个Observable结合起来，并从uploadTrainingModule返回。
• subscribe 到你的createTrainingModule 中的这个Observable，并在subscribe 方法中做你需要的事情。

您的代码应如下所示：

import { forkJoin, from, Observable } from "rxjs";

uploadTrainingModule(selectedFiles: any = this.files): Observable<any> {
  // Perform Image Upload
  // `forkJoin` will return one Observable once all the inner Observables (generated from promises using RxJS's `from` function) have been completed
  return forkJoin(
    selectedFiles.map((file) => from(this.filesUploaded.push(file)))
  );
}

createTrainingModule() {
  this.uploadTrainingModule().subscribe((resp) => {
    // Upload to DB code below
  });
}