如何处理 RxJs 运营商的依赖 http 服务调用订阅？

debugcn 发表于 Dev

绍福尔

我有一个名为 fetchSeviceProviders 的函数，它将返回一个服务提供商列表，并让我通过调用另一个服务来设置服务提供商的徽标。我通过使用两个订阅实现了这一点。

在第一次订阅时，我得到了列表。然后我映射它并通过所有服务提供者的 id 调用 fetchServiceProviderLogo。

这可以通过一次订阅来完成吗？我的方法行吗？如果不是，问题是什么？我怎样才能通过一些 rxjs 运营商做到这一点？

我尝试了 map 和 flatMap 运算符，但找不到线索。

fetchServiceProviders ()
{
    this.subscribers.fetchServiceProvidersLogoSub = this.serviceProviderService.fetchServiceProviders( new Map() ).subscribe(
        data =>
        {
            this.providers = data._embedded.serviceProviders;
            this.providers.map(
                provider =>
                {  
                    this.subscribers.fetchServiceProvidersLogoSub =
                        this.serviceProviderService.fetchServiceProviderLogo( { 'id': provider.id } ).subscribe(
                            logo =>
                            {
                                this.createIndividualLogoFromBlob( provider, logo );
                            }
                        );
                }
            );
        }
    )
}

弗里多

如果您所有的 Observable 都完成并且this.serviceProviderService.fetchServiceProviderLogo调用的顺序无关紧要，您可以使用switchMap(或mergeMap) 和merge. 如果您的提取请求全部完成，您也不必取消订阅。

fetchServiceProviders () {
  this.serviceProviderService.fetchServiceProviders(new Map())
    .pipe(
      map(data => data._embedded.serviceProviders),
      mergeMap(providers => merge(
        providers.map(provider =>
          this.serviceProviderService.fetchServiceProviderLogo({ 'id': provider.id })
           .pipe(map(logo => ({ provider, logo })))
        )
      ))
    )
    .subscribe(({ provider, logo }) => this.createIndividualLogoFromBlob(provider, logo));
}

而不是merge你可以用来并行forkJoin执行你的this.serviceProviderService.fetchServiceProviderLogo调用。

fetchServiceProviders () {
  this.serviceProviderService.fetchServiceProviders(new Map())
    .pipe(
      map(data => data._embedded.serviceProviders),
      mergeMap(providers => forkJoin(
        providers.map(provider =>
          this.serviceProviderService.fetchServiceProviderLogo({ 'id': provider.id })
           .pipe(map(logo => ({ provider, logo })))
        )
      ))
    )
    .subscribe(providerLogos =>
       providerLogos.forEach(({ provider, logo }) => this.createIndividualLogoFromBlob(provider, logo))
    );
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。