实现可观测序列的更好方法

Question

我一直在努力从我的http请求序列中获得正确的效果。我必须发出一个返回站点对象数组的初始请求。然后，我必须使用站点对象中的两个id发出另外两个http请求，以获取相关的站点、组织名称和团队名称，并将它们添加到每个站点对象中。所以我的步骤是：

1. 获取站点列表
2. 使用站点组织id获取相关组织并将名称添加到站点对象中。
3. 使用site id获取相关团队，并将团队名称添加到站点对象中。

我的代码如下：

private getSites() {
  this.spinner.show();
  this.sitesService.getSitesByUserId(this.userId)
    .subscribe(
      _data => {
        _data.map(site => {
          this.orgService.getOrganization(site['OrganizationId'])
            .map(org => {
              site['orgName'] = org['org']['name'];
              return org;
            })
            .flatMap(() => this.teamsService.getTeam(site['TeamId']))
            .map(team => {
              site['teamName'] = team['team']['name'];
              return team;
            })
            .subscribe(
              _d => {
                this.sites.push(site);
              }
            );
        });
      },
      _error => {},
      () => {
        this.spinner.hide();
        this.loading = false;
      }
    );
}

在我的html中，我正在绑定数据：

<div *ngFor="let site of (sites | filterlist: value : 'name')">
  <card-directory-item (click)="siteSelected(site)">
    <i class="material-icons item-icon">location_city</i>
    <h2 class="item-name">{{ site.name }}</h2>
    <div class="item-field-1">{{ site.city }}  {{ site.state }} </div>
    <div class="item-static-field flex-column">
      <div>{{ site.teamName }}</div>
      <div>{{ site.orgName }}</div>
    </div>
  </card-directory-item>
</div>

问题是，在完成所有步骤和每个列表项按完成顺序弹出之前，正在移除旋转器。我知道为什么会这样。我只是还没有弄清楚如何在删除旋转器和显示数据之前将可观察到的流链接起来以完成所有的工作。

任何协助都会很好。谢谢。

Answer 1

问题是，您subscribe到getSitesByUserId(this.userId)返回的可观察到的“太早”。

在这里，您的代码看起来有点像这样

this.sitesService.getSitesByUserId(this.userId)
  .subscribe(
    otherAsyncOp,
    errorCallback,
    completeCallback
  )

问题是，每当onCompleteCallback返回的可观察到的getSitesByUserId已经完成时，就会调用它，这是在您的其他http请求完成之前。

如果要按顺序调用所有url，则必须以这种方式使用mergeMap (或别名flatMap )

this.sitesService.getSitesByUserId(this.userId)
  .mergeMap(sites => Rx.Observable.from(sites)) // create an observable per site
  .mergeMap(site => this.sitesService.getOrga(site.id)
                        .map(orga => Object.assign({}, site, { orgName: orga.org.name }))
  .mergeMap(site => this.sitesService.getTeam(site.teamId).map(team => Object.assign({}, site, {teamName: team.team.name})
  .reduce((sites, site) => sites.concat(site), [])
  .subscribe( /* there every request should be done and you can remove your loader */)

对不起，这是一个很长的答案，但你的问题很宽泛。我无法执行这段代码，所以我不能百分之百地确定它是否有效，但至少你有了这个想法。

Answer 2

您可以将每个站点映射到组织和团队请求的压缩。zip的第三个参数是回调，它可以用Object.assign组成最终的对象。

this.sitesService
  .getSitesByUserId(this.userId)
  .mergeMap(sites => Observable.from(sites))
  .mergeMap(site => {
    return Observable.zip(
      this.orgService.getOrganization(site['OrganizationId']),
      this.teamService.getTeam(site['TeamId']),
      (org, team) => Object.assign(site, {
        orgName: org['org']['name'],
        teamName: team['team']['name']
      })
    )
  })
  .subscribe(console.log)