Подождите, пока наблюдаемый объект получит данные, прежде чем выполнять другой

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 применяет к нему идентификатор, поэтому в данных, которые я получаю в качестве ответа, теперь он должен иметь мне бы. Затем я попытался добавить массив назначенных сотрудников, который я получил из формы. Проблема в том, что аргумент 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();
}