如何异步调用方法并等待 API 调用完成

Question

我是 angular 的新手，遇到了创建两个组件 学生组件 和 Parent 组件[= 的情况76=]:

我在 studentHttpService class 中为学生的所有 RESTAPI 服务创建了一个单独的函数文件，我有一个方法：

SaveOrUpdateStudent(studentDetail: IStudentDetail): Observable<IStudentDetail> { return this.http.post<IStudentDetail>(this.serverurl + '/api/studentdata/SaveOrUpdateStudent', studentDetail); }

上述服务在 Student Component 中调用，其中方法 SaveStudent() 检查所有必需的验证，然后调用 studentHttpService.SaveOrUpdateStudent(studentDetail)

这适用于学生组件。

对于Parent组件我也做了类似的事情：

在 parentHttpService class 中为 parent 的所有 RESTAPI 服务创建了一个单独的函数文件：

SaveOrUpdateParent(parentDetail: IParentDetail): Observable<IParentDetail> { return this.http.post<IParentDetail>(this.serverurl + '/api/parentdata/SaveOrUpdateParent', parentDetail); }

现在我的问题是，在 Parent 组件中，我有一个部分可以创建一个新的 parent 并且在创建时我有一个下拉列表到 select 学生列表中的一个学生并保存 parent 详细信息，学生 selected linked 到 parent。使用下拉功能，我在下拉列表旁边还有一个按钮来创建一个新学生，然后单击该按钮以模式打开学生组件（该模式仅允许用户输入新学生的详细信息，并且在用户时不应保存单击模态的 OK 按钮）并且我在 Parent 组件中使用了与 child 组件相同的学生组件。当用户点击 OK 按钮填写学生的详细信息后，它会在学生下拉列表中填充新创建的学生的姓名以及当前值 selected

当我保存 parent 的详细信息时，它应该保存新创建的学生和 parent 的详细信息，并且 link 新创建的学生也应该保存到 parent .

为此，我尝试使用 async/await，其中：

我用过：

@ViewChild(StudentDetail) studentDetail: StudentDetail; async SaveParent(): Promise<void> { if(newStudentCreated) { await studentDetail.SaveStudent(); } await parentHttpService.SaveOrUpdateParent(parentDetail); }

在我的 Parent 组件中 class

因此，如果我调试并检查它工作正常并且新学生被 link 编辑为 Parent。但有时它不会 link 当需要更多时间来保存学生数据时。我尝试使用：

SaveParent(): Promise<void> { return new Promise((resolve) => { if(newStudentCreated) { studentDetail.SaveStudent(); } resolve(); }).then(()=> { parentHttpService.saveOrUpdateParent(parentDetail) }); }

它也有同样的问题。帮助我使用类似的技术朝着正确的方向努力。

Answer 1

您在这里不需要 async 或 await。你可以做这样的事情（简化一点所以它可能需要一些工作）：

saveStudentAndParent(): void {
    studentDetail.saveStudent().pipe(takeUntil(this._destroy$)).subscribe(
        data => this.saveParent(data),
        err => console.log(err)
    )
}

saveParent(data: any): void {
  // Do your check if the student saved successfully then save parent
}

您会注意到我正在使用 takeUntil 来确保取消订阅，这比我在这里开始工作需要更多的管道，但相当简单。您所要做的就是设置一个名为 destroy$ 的 Subject 并在 ngOnDestroy 中调用

this._destroy$.next(true);
this._destroy$.complete();

在保存学生调用的订阅中调用 saveParent 确保学生调用在继续之前完成。

Answer 2

为什么不用switchMap？

parentHttpService.saveOrUpdateStudent(studentDetail: IStudentDetail).pipe(
   switchMap(res=>{
      ..here you has the response of saveStudent
      ..I supouse you want to change "parentDetail", with the response
      ..e.g. if return a studentId, you can write some like
      parentDetail.studentId=res.studentId
      return parentHttpService.saveOrUpdateParent(parentDetail)
   })).subscribe(res=>{
      ..here the response of saveParent..
   })

如何异步调用方法并等待 API 调用完成

How to async call a method and wait for an API call to complete

javascript

angular

typescript

observable

subscribe