如何根据来自先前请求的数据创建具有多个请求的解析器​​？

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

首先，您需要使用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，以查看实际效果

Answer 2

  

尝试这样的事情...

注意：READ THIS

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 3

又一个版本

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')
  );