Question

我对rxjs很陌生，而且我有一个非常简单的案例，我无法以角度解决问题。

我有一个http调用来检索一个组，该组包含“伙伴ID”列表，“体裁ID”列表和“区域ID”列表。

要使伙伴对象通过“伙伴ID”，我必须通过服务调用API（该API返回1个具有给定ID的伙伴）。

要获取我的流派对象，我可以从商店中检索它们，对于地区也是如此。

问题是我无法使用管道解决方案。

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

似乎您的内部mergeMap太多。试试这个

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]) => {});

主要问题是，您将创建可观察对象（例如forkJoin）的“构造”方法与对现有可观察对象（例如 switchMap或mergeMap）。

亲自测试差异：switchMap与forkJoin

我已经写了这篇没有深度测试的文章，所以它可能不会立即起作用：）

Answer 2

此版本较为冗长，但由于将其分为几个块，因此可能更易于推断。尚未测试过。

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]) => {});

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

2 个答案: