Angular 6 管道 RxJs 操作符链接 3 个依赖的 observables [英] Angular 6 pipe RxJs operator to chain 3 dependant observables
问题描述
我有 3 个依赖的 Rest API 资源(比如 observables),如下所示:
I have 3 dependent Rest API resources (lets say observables) like this:
第一个 observable 将一个项目作为用户数组生成,如下所示:
1st observable produces one item as array of users, like this:
getUsers(): Observable<User[]>
[
{
"id": 1,
"name": "Peter",
"surname": "Smith"
},
{
"id": 2,
"name": "John",
"surname": "Wayne"
},
...
]
2nd observable 可用于获取分配给用户的地址,因此输入参数为用户 ID,并以地址数组的形式返回一项:
2nd observable can be used to fetch addresses assigned to user, so the input parameter is User ID, and returns a one item as array of addresses:
getUserAddresses(user_id: string): Observable<Address[]>
[
{
"id": 1,
"city": "London",
"street": "Wicombe 34"
},
{
"id": 2,
"city": "Paris",
"street": "La fever 20"
},
...
]
3rd observable 可用于获取分配给用户的公司,因此输入参数为用户 ID,并以公司数组形式返回一项:
3rd observable can be used to fetch companies assigned to user, so the input parameter is User ID, and returns a one item as array of companies:
getUserCompanies(user_id: string): Observable<Company[]>
[
{
"id": 1,
"name": "Fintch CO",
"state": "France"
},
{
"id": 2,
"name": "C&C inc.",
"state": "USA"
},
...
]
<小时>
我想将这 3 个 observable 链接成一个,它将再次作为一个项目产生结果,其中将包含用户数组及其附加地址数组和公司数组,如下所示:
I want to chain these 3 observables into one which will produce the result again as one item, that will contain array of users with their additional addresses arrays and companies array, like following:
[
{
"id": 1,
"name": "Peter",
"surname": "Smith",
"addreesses":
[
{
"id": "1",
"city": "London",
"street": "Wicombe 34"
},
{
"id": "2",
"city": "",
"street": "La fever 20"
}
],
"companies":
[
{
"id": "1",
"name": "Fintch CO",
"state": "France"
},
{
"id": "2",
"name": "C&C inc.",
"state": "USA"
}
]
}
},
{
"id": 2,
"name": "John",
"surname": "Wayne",
"addresses": [...],
"companies": [...],
},
...
]
在带有 RxJs 6 的 Angular 6 中,操作符应该如何组合来实现这一点?非常感谢您的建议.
How should look like the operators composite to achieve that in Angular 6 with RxJs 6? Thanks a lot for advice.
推荐答案
这样的事情可以工作
getUsers()
.pipe(
switchMap(users => from(users)),
mergeMap(user => forkJoin(getAddresses(user.id), getCompanies(user.id))
.pipe(map(data => ({user, addresses: data[0], companies: data[1] })))
tap(data => data.user.addresses = data.addresses),
tap(data => data.user.companies = data.companies),
map(data => data.user),
toArray()
)
)
应用于不同用例的类似链在这里有更详细的解释.
Applied to a different use case a similar chain is explained in more details here.
这篇关于Angular 6 管道 RxJs 操作符链接 3 个依赖的 observables的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!