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

我有两个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 },
      }
    );
  }

添加项目请求：

addProject(project: IProject): Observable<IProject> {
    return this.httpClient.post<IProject>(this.baseUrl, project);
  }

addProject（项目：IProject）：可观察{
返回this.httpClient.post（this.baseUrl，project）；
}

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

public async myFunc(): Promise<void> {
const newProjectFromServer = await this.projectService.addProject(newProject).toPromise()

await this.projectService
  .addEmployeesToProject(
    newProjectFromServer.id,
    newProject.assignedEmployees
   ).toPromise();
this.afterSubmit();
}

public async myFunc（）：Promise{
const newProjectFromServer=wait this.projectService.addProject（newProject.toPromise（））
等待此服务
.addEmployeesToProject(
newProjectFromServer.id，
新项目。被派遣员工
).toPromise（）；
这个。后submit（）；
}

使用switchMap操作符应该可以实现类似的功能

this.projectService.addProject(newProject).pipe(
  tap(data => newProjectFromServer = data),
  switchMap(() => {
    return this.projectService.addEmployeesToProject(
    newProjectFromServer.id, 
    newProject.assignedEmployees
  )}
).subscribe((secondResult) => {
   this.afterSubmit()
});

我希望这有帮助

有关switchMap操作员的研究链接：

---

您可以使用concatMap、switchMap、mergeMapconcatMap是推荐的，因为它确保了HTTP调用的顺序执行

this.projectService.addProject(newProject).pipe(
  concatMap((newProjectFromServer) => {            
    this.projectService.addEmployeesToProject(
       newProjectFromServer.id, 
       newProject.assignedEmployees
    )}
).subscribe((secondResult) => {
   this.afterSubmit()
});

---

在这种情况下，您可以使用管道，或者将AddEmployeeStopProject调用移动到addProject subscribe内部，这样您就可以访问新的项目IDThank了，但是我这样做了，并且我得到了两个错误：“（）=>void”类型的参数不能分配给类型的参数“（值：未知，索引：编号）=>observeInput”。类型“void”不可分配给类型“ObservableInput”。ts（2345）您必须键入您的服务返回调用，您能给我看一下您的服务代码吗？我忘了在开关映射上添加

返回

。哈哈，很抱歉，我用添加项目请求编辑了这篇文章。AddEmployeeStopProject已经在POST中。这似乎工作正常。id从不为空。让我们看看我现在是否可以使用switchMap。就像另一个建议使用switchMap的人一样，这段代码给了我类型为“（newProjectFromServer:unknown）=>void”的参数，它不能赋值给类型为“（value:unknown，index:number）=>ObservableInput”的参数。类型“void”不可分配给类型“ObservableInputArgument”，在这种情况下，

switchMap

之后似乎缺少该类型。把它和我的答案比较一下，你就会明白。不，我是说，我试过你的密码。我试图给newProjectFromServer指定一个类型：IProject，否则它无法识别.id。无论哪种方式，我都会得到一个类似的错误：类型为“（newProjectFromServer:unknown）=>void”的参数不能分配给类型为“（value:unknown，index:number）=>ObservableInput”的参数。根据给定的代码片段，我们的解决方案必须有效。我相信我们需要看看您是如何实现

addEmployeesToProject

功能的。我现在将编辑帖子，该功能返回添加的员工，但不会持久化。老兄，我觉得我做错了什么，做简单的积垢手术不会这么难

this.projectService.addProject(newProject).pipe(
  concatMap((newProjectFromServer) => {            
    this.projectService.addEmployeesToProject(
       newProjectFromServer.id, 
       newProject.assignedEmployees
    )}
).subscribe((secondResult) => {
   this.afterSubmit()
});