时间戳

首页 > 解决方案 > RxJs：加载相关资源

rxjs - RxJs：加载相关资源

问题描述

我正在努力实现以下操作序列：

  1. 进行 API 调用，从响应中获取数据。作为回应，我将拥有一个指向相关资源的端点数组的属性。例如：{ ..., relatedResources: ['my.app/api/resource/1', 'my.app/api/resource/2'] }
  2. 将每个端点映射 relatedResources到 http request，从每个响应中获取数据，这样我就可以拥有实际的资源数组而不是端点数组。为了说明应该实现的目标： ['my.app/api/resource/1', 'my.app/api/resource/2'] => [{...}, {...}]
  3. 将来自第 1 步和第 2 步的数据结合起来，这些数据基本上是来自第 1 步的数据与映射realtedResources属性（包含数据，而不仅仅是端点）

我怎样才能做到这一点，哪些运算符对我的情况有用？

标签： rxjs

解决方案

我想你可以试试这个：

response$.pipe(
  switchMap(
    response => forkJoin(
      response.relatedResources.map(resource => this.apiService.makeRequest(resource))
    ).pipe(
      // you can perform all sorts of transformations here
      // since you have access to both the initial `response`
      // and the resulted data
      map(resourcesResArray => ({
        ...response,
        relatedResources: resourcesResArray,
      }))
    )
  )
)

forkJoin接受一个可观察对象数组（或一个其值为可观察对象的对象），并将订阅所有这些对象，并将发出一个数组，其中包含来自每个可观察对象的所有响应和一个通知，以防所有给定的可观察对象至少complete发出一个value 并完成，或者只是一个通知，以防所有 observables 都完成并且至少一个没有发送任何值。complete

这是实现forkJoin，值得一看，也很有趣。

然后，通过使用闭包，我们可以引用response包含endpoints.

此外，这种方法假定this.apiService.makeRequest返回一个可观察对象，该可观察对象在发出响应后完成。

推荐阅读