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

Question

我是 angular 的新手，并且陷入了我创建两个组件Student Component和Parent Component的场景中：我在studentHttpService类中为学生的所有 RESTAPI 服务创建了一个单独的函数文件，我有一个方法：SaveOrUpdateStudent(studentDetail: IStudentDetail): Observable<IStudentDetail> {    return this.http.post<IStudentDetail>(this.serverurl + '/api/studentdata/SaveOrUpdateStudent', studentDetail);}上述服务在学生组件中调用，其中一个方法SaveStudent()检查所有必需的验证，然后调用studentHttpService.SaveOrUpdateStudent(studentDetail)这适用于学生组件。对于父组件，我也做了类似的事情：在parentHttpService类中为父级的所有 RESTAPI 服务创建了一个单独的函数文件：SaveOrUpdateParent(parentDetail: IParentDetail): Observable<IParentDetail> {    return this.http.post<IParentDetail>(this.serverurl + '/api/parentdata/SaveOrUpdateParent', parentDetail);}现在我的问题是，在 Parent 组件中，我有一个部分来创建一个新的父级，在创建时我有一个下拉列表可以从学生列表中选择一个学生，并在保存父级详细信息时，选择的学生链接到父级。使用下拉功能，我在下拉菜单旁边还有一个按钮来创建一个新学生，然后单击该按钮以模式打开学生组件（模式只允许用户输入新学生的详细信息，并且不应在用户输入时保存）单击模态的 OK 按钮）并且我在父组件中使用了相同的学生组件作为子组件。当用户单击“确定”按钮时填写学生的详细信息后，它会在学生下拉列表中填充新创建的学生的姓名以及当前选择的值。当我为家长保存详细信息时，它应该保存新创建的学生和家长详细信息，它也应该将新创建的学生链接到家长。所以为此我尝试使用 async/await ，其中：我用了 ：@ViewChild(StudentDetail) studentDetail: StudentDetail;async SaveParent(): Promise<void> {    if(newStudentCreated) {        await studentDetail.SaveStudent();    }    await parentHttpService.SaveOrUpdateParent(parentDetail);}在我的父组件类中所以如果我调试并检查它工作正常并且新学生链接到父级。但有时当保存学生数据需要更多时间时它不会链接。我尝试使用：SaveParent(): Promise<void> {return new Promise((resolve) => {    if(newStudentCreated) {         studentDetail.SaveStudent();    }     resolve();    }).then(()=> {     parentHttpService.saveOrUpdateParent(parentDetail)     });}它也有同样的问题。使用类似的技术帮助我朝着正确的方向工作。

Answer 1

为什么不使用 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..

   })

Answer 2

你不需要 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$ 的主题并在 ngOnDestroy 中调用

this._destroy$.next(true);

this._destroy$.complete();

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