如何异步调用方法并等待 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(&nbsp; &nbsp;switchMap(res=>{&nbsp; &nbsp; &nbsp; ..here you has the response of saveStudent&nbsp; &nbsp; &nbsp; ..I supouse you want to change "parentDetail", with the response&nbsp; &nbsp; &nbsp; ..e.g. if return a studentId, you can write some like&nbsp; &nbsp; &nbsp; parentDetail.studentId=res.studentId&nbsp; &nbsp; &nbsp; return parentHttpService.saveOrUpdateParent(parentDetail)&nbsp; &nbsp;})).subscribe(res=>{&nbsp; &nbsp; &nbsp; ..here the response of saveParent..&nbsp; &nbsp;})

Answer 2

你不需要 async 或 await 在这里。你可以做这样的事情（稍微简化一下，所以它可能需要一些工作）：saveStudentAndParent(): void {&nbsp; &nbsp; studentDetail.saveStudent().pipe(takeUntil(this._destroy$)).subscribe(&nbsp; &nbsp; &nbsp; &nbsp; data => this.saveParent(data),&nbsp; &nbsp; &nbsp; &nbsp; err => console.log(err)&nbsp; &nbsp; )}saveParent(data: any): void {&nbsp; // Do your check if the student saved successfully then save parent}你会注意到我使用 takeUntil 来确保取消订阅，这需要更多的管道，然后我在这里开始工作，但相当简单。您所要做的就是设置一个名为 destroy$ 的主题并在 ngOnDestroy 中调用this._destroy$.next(true);this._destroy$.complete();在保存学生调用的订阅中调用 saveParent 可确保在继续之前完成学生调用。