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();
}

等待一个可观察对象检索数据，然后再执行另一个

3 个答案: