Angular 个 http 请求的串联

Question

我面临以下情况。有一个使用 Angular(2) 构建的前端应用程序，它与可通过 http 访问的 REST 后端连接。一旦用户登录（使用电子邮件和密码），与用户相关的后端 returns 数据，特别是与用户关联的 ID（我们称之为 userId）以及他居住地区的代码（我们称之为 regionId）。通过 userId，我可以查询后端以获取用户所属的关联组 ID（我们称之为 affinityId）。最后，使用 affinityId 和 regionId 我可以从后端检索 discount 以应用于用户.

换句话说，后端提供 3 APIs:

getUserData(email: string, pwd: string) : returns 所有用户数据包括 userId 和 regionId
getAffinityPerUser(userId: number) : returns 代表 affinityId
getDiscount(regionId: number, affinityId: number) : returns 代表 discount

如果我通过 Angular http 客户端访问这些 APIs，我可以构建以下 APIs（在某种 Javascript 伪代码中）

getUserData(email: string, pwd: string) : Observable(<{userId, regionId, ...}>)
getAffinityPerUser(userId: number) : Observable()
getDiscount(regionId: number, affinityId: number) : 可观察的（）

我想知道我是否可以使用 RxJs 运算符组合这些 Observables 以获得我正在寻找的 discount 信息。

我可以通过 switchMap 连接前 2 个 API 以获得 affinityId 和

this.getUserData(email, pwd)
     .switchMap(userData => this.getAffinityPerUser(userData.userId))

但是我不知道如何将 affinityId Observable（由 getAffinityPerUser 返回）与 userData Observable（由 getUserData 返回）结合起来能够同时拥有 affinityId 和 regionId 我需要调用 getDiscount API.

非常感谢任何帮助

Answer 1

您可以像这样组合所有操作：

this.getUserData(email, pwd)
     .switchMap(userData => this.getAffinityPerUser(userData.userId)
                                .map(affinity => [affinity, userData.regionId])) // return a tuple combining required elements
     .switchMap(([affinity, regiondId) => this.getDiscount(regionId, affinity)) // use destructuration to extract the 2 elements of the tuple

Angular 个 http 请求的串联

Concatenation of Angular http requests

rxjs

angular2-http

angular