[英]Chaining observables Angular 5 / Rxjs
I am a bit confused with rxjs operators. 我对rxjs运算符有点困惑。 I have few api calls that return observable:
我很少返回可见的api调用:
getCurrentUser(): Observable<any> {
return this.http.get<any>(userUrl);
}
tagsList(): Observable<string[]> {
return this.http.get<string[]>(tagsUrl);
}
timezonesList(): Observable<Timezone[]> {
return this.http.get<Timezone[]>(timezonesUrl);
}
I want to call getCurrentUser()
then with result of returning value call action LoadUser(user)
Then after user loads call multiple async requests at the same time: 我想先调用
getCurrentUser()
然后返回值,然后调用操作LoadUser(user)
返回结果,然后在用户加载后同时调用多个异步请求:
tagsList(), timezonesList()
And then with results of returning value of them call actions LoadTags(tags), LoadTimezones(timezones)
然后,根据返回值的结果,调用操作
LoadTags(tags), LoadTimezones(timezones)
So it should looks like something like this: 所以它看起来应该像这样:
init() {
this.accountsApi.getCurrentUser()
.map((user: User) => this.store.dispatch(new LoadUser({ user })))
.map(
this.commonApi.tagsList(),
this.commonApi.timezonesList(),
this.commonApi.authoriztionServicesList()
)
.map((tags, timezones, authorizationServices) => {
this.store.dispatch(new tagsActions.LoadTags(tags));
this.store.dispatch(new timezonesActions.LoadTimezones(timezones));
this.store.dispatch(new authorizationServicesActions.LoadAuthorizationServices(authorizationServices));
});
}
I know that this operators are wrong. 我知道这个运算符是错误的。 What operators should i use for this?
我应该使用什么运算符? I have already done it with promises, but i am sure that i can do it with rxjs operators in less line of code.
我已经用诺言做到了,但是我确信我可以用更少的代码行就可以用rxjs运算符来做到这一点。
PS Also it is interesting for me how i can do this with async / await? PS也对我来说很有趣,我如何用异步/等待呢? Thank you
谢谢
In your original code you are using map a bit too much, for some use cases you may not need to map. 在原始代码中,您使用了map太多了,对于某些用例,可能不需要映射。
init() {
return this.accountsApi.getCurrentUser()
.do((user: User) => this.store.dispatch(new LoadUser({ user })))
.forkJoin(
this.commonApi.tagsList(),
this.commonApi.timezonesList(),
this.commonApi.authoriztionServicesList()
)
.do((results) => {
this.store.dispatch(new tagsActions.LoadTags(results[0]));
this.store.dispatch(new timezonesActions.LoadTimezones(results[1]));
this.store.dispatch(new authorizationServicesActions.LoadAuthorizationServices(results[2]));
});
}
forkJoin lets you fire off many observable subscriptions and once all subscriptions produce values you get a single array of observable values back. forkJoin使您可以触发许多可观察的订阅,并且一旦所有订阅产生了值,您就可以返回一个可观察值的数组。
The do operator introduces side effects to launch your store actions since you don't want to create any arrays. 由于您不想创建任何数组,所以do运算符会引入副作用来启动您的商店操作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.