Как создать распознаватель с несколькими запросами, зависящими от данных из предыдущего запроса?

Question

У меня есть компонент, который извлекает свой бизнес-объект из одного HTTP-запроса, а затем выполняет несколько последующих запросов для заполнения раскрывающихся списков. Аргументы в этих последующих запросах состоят из данных бизнес-объекта, поэтому эти запросы не могут начинаться, пока не завершится первый.

Учитывая пример резольвера PersonResolver, я хочу достичь этого потока:

1. Звоните this.personService.getPersonData(). Возвращает тип Observable<PersonModel>.
2. Используйте возвращенный экземпляр PersonModel, который мы назовем personData, для вызова this.personService.getAdditionalData1(personData.foo) и this.personService.getAdditionalData2(personData.bar). Оба возвращают тип any[].
3. Тип возврата Observable<PersonModel, any[], any[]> из метода resolve.

Я хотел бы внедрить это в распознаватель компонента, но мне тяжело сосредоточиться на правильном использовании RxJS, которое мне нужно для работы.

Вот что у меня так далеко. Я застрял довольно быстро.

constructor(private personService: PersonService) { }

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<PersonModel, any[], any[]> | Observable<Observable<PersonModel, any[], any[]>> | Promise<Observable<PersonModel, any[], any[]>> {
  this.personService.getPersonData().subscribe(personData => {
      // what to put in here?
  });
}

Answer 1

Попробуйте что-то вроде этого ...

Примечание: ПРОЧИТАЙТЕ

constructor(private personService: PersonService) { }

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<PersonModel, any[], any[]> | Observable<Observable<PersonModel, any[], any[]>> | Promise<Observable<PersonModel, any[], any[]>> {
  return this.personService.getPersonData().pipe(
    mergeMap(personData => this.personService.getAdditionalData1(personData.foo)),
    mergeMap(this.personService.getAdditionalData2(personData.bar)));
}

Answer 2

Еще одна версия

this.personService
  .getPersonData()
  .pipe(
    mergeMap(personData =>
      merge(
        this.personService.getAdditionalData1(personData.foo),
        this.personService.getAdditionalData2(personData.bar)
      )
    )
  )
  .subscribe(
    r => console.log('Response', r),
    e => console.log(e),
    () => console.log('Done')
  );

Answer 3

Сначала вам нужно использовать mergeMap, чтобы передать модель PersonModel с первого звонка. Затем вам нужно использовать zip, чтобы собрать все результаты в один массив.

this.personService.getPersonData.pipe(
  mergeMap(
    personData => zip(
      of(personData),
      of(getAdditionalData1(personData.foo)),
      of(getAdditionalData2(personData.bar))
    )
  )
).subscribe(allData => {
  // here you will have all of the data placed in 'allData' param
});

Посмотрите это просто StackBlitz DEMO , чтобы увидеть это в действии