javascript - 如何异步调用方法并等待 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);
}

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

这适用于学生组件。

对于父组件我也做了类似的事情:

在 parentHttpService 类中为 parent 的所有 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..
   })