在执行另一个可观察对象之前等待一个可观察对象检索数据

Question

我有这两个 http 调用：const newProject = this.newProjectForm.value;newProject.stage = "In progress";let newProjectFromServer: IProject;this.projectService.addProject(newProject).subscribe((data) => {  newProjectFromServer = data;});this.projectService  .addEmployeesToProject(    newProjectFromServer.id,    newProject.assignedEmployees   )   .subscribe(() => {     this.afterSubmit();   });第一个将项目添加到数据库中，因此 Spring 对其应用了一个 id，因此在我作为响应获得的数据中，它现在应该有一个 id。然后我尝试添加从表单中获得的指定员工数组。问题是 newProjectFromServer.id 参数未定义，因为我认为它是同步读取的编辑：这是 addEmployeesToProject 函数：addEmployeesToProject(    projectId: number,    employees: IEmployee[]  ): Observable<IEmployee[]> {    return this.httpClient.post<IEmployee[]>(      `${this.baseUrl}/${projectId}/employees`,      {        _embedded: { employees },      }    );  }Api 结果：{"_embedded": {     "employees": [] // IEmployee[] array doesnt get save   },   "_links": {     "self": {      "href": "http://localhost:8080/api/projects/26/employees"     }   } }添加项目请求：addProject(project: IProject): Observable<IProject> {    return this.httpClient.post<IProject>(this.baseUrl, project);  }

Answer 1

像这样的东西应该使用 switchMap 运算符

this.projectService.addProject(newProject).pipe(

  tap(data => newProjectFromServer = data),

  switchMap(() => {

    return this.projectService.addEmployeesToProject(

    newProjectFromServer.id, 

    newProject.assignedEmployees

  )}

).subscribe((secondResult) => {

   this.afterSubmit()

});

我希望它有所帮助。

有关 switchMap 运算符的研究链接：

https://www.learnrxjs.io/learn-rxjs/operators/transformation/switchmap

Answer 2

您可以使用concatMap、switchMap、mergeMap。建议使用concatMap，因为它可以确保 HTTP 调用的顺序执行。

this.projectService.addProject(newProject).pipe(

  concatMap((newProjectFromServer) => {            

    this.projectService.addEmployeesToProject(

       newProjectFromServer.id, 

       newProject.assignedEmployees

    )}

).subscribe((secondResult) => {

   this.afterSubmit()

});

Answer 3

我认为更好的方法是将其转换为承诺：

public async myFunc(): Promise<void> {

const newProjectFromServer = await this.projectService.addProject(newProject).toPromise()

await this.projectService

  .addEmployeesToProject(

    newProjectFromServer.id,

    newProject.assignedEmployees

   ).toPromise();

this.afterSubmit();

}