RXJS - 对属性数组的多个可观察调用

Question

我对rxjs不熟悉，而且我有一个相当简单的案例，我无法解决角度问题。

我有一个http调用来检索一个组，这个组包含一个“伙伴id”列表，一个“流派id”列表和一个“region id”。

为了通过“好友ID”获取好友对象，我必须通过我的服务调用API（返回给定id的1个好友）。

为了得到我的流派对象，我可以从我的商店中检索它们，同样适用于地区。

问题是我无法通过管道解决问题。

this.buddyService.getGroup(groupId).pipe(
    mergeMap((group) => forkJoin(
          mergeMap(() => forkJoin(group.buddyIds.map((id) => this.buddyService.getBuddy(id)))), 
          mergeMap(() => forkJoin(group.genreIds.map((id) => this.store.select(GenreState.genre(id))))),
          switchMap(() => this.store.select(RegionState.region(group.regionId))))
    ), takeUntil(this.destroyed$)
).subscribe(([group, buddies, genres, region]) => {

});

所以第一个mergeMap将在1个订阅中获得所有结果，然后我有3个子调用来获取好友，流派和区域。

我想在1个订阅中获得我的初始响应（组）和3个子查询的结果，显然这个解决方案不起作用，我似乎无法获得其他工作。

任何帮助将不胜感激，谢谢！

Answer 1

这个版本有点冗长，但可能更容易推理，因为它被分成几个块。虽然没有测试过。

import {combineLatest} from 'rxjs';

...

  const group$ = this.buddyService.getGroup(groupId);
  const buddies$ = group$.pipe(mergeMap(group => combineLatest(group.buddyIds.map((id) => this.buddyService.getBuddy(id))));
  const genres$ = group$.pipe(mergeMap(group => combineLatest(group.genreIds.map((id) => this.store.select(GenreState.genre(id))));
  const region$ = group$.pipe(switchMap(group => this.store.select(RegionState.region(group.regionId)))));

  combineLatest([group$, buddies$, genres$, region$])
    .pipe(takeUntil(this.destroyed$))
    .subscribe(([group, buddies, genres, region]) => {});

Answer 2

看起来你有太多内在的mergeMaps。试试这个

this.buddyService.getGroup(groupId).pipe(
  mergeMap((group) => forkJoin(
    of(group),
    forkJoin(...group.buddyIds.map((id) => this.buddyService.getBuddy(id))), 
    forkJoin(...group.genreIds.map((id) => this.store.select(GenreState.genre(id)))),
    this.store.select(RegionState.region(group.regionId)))
  ),
  takeUntil(this.destroyed$)
)
.subscribe(([group, buddies, genres, region]) => {});

主要问题是你将“构造”方法与创建Observables（如forkJoin）的方法结合起来，这些方法可以在现有的Observables上运行（如switchMap或mergeMap）。

自己测试差异：switchMap vs forkJoin

我写了这个没有深度测试，所以它可能不会立即工作:)