订阅多个Observable in Angular 2
我的Angular 2应用程序在服务中有2个方法[GetCategories()和GetCartItems()],并且这两个方法都返回 Observables。订阅多个Observable in Angular 2
为了这两个方法调用陆续从我的组件,我写了下面的代码从内部GetCategories()的认购
ngOnInit()
{
this.appService.GetCategories().subscribe((data) => {
this.appService.categories = data;
this.appService.GetCartItems().subscribe({
next: (data) => { this.appService.cart = data},
error: (err) => { this.toaster.error('cart==>' + err)}
})
});
}
基本上调用GetCartItems,我觉得这是不正确的方法,这是一种回调地狱。
任何想法如何以更好的方式实现这个(如链接“然后”承诺)?
看起来像GetCartItems
doens't取决于GetCategories
。然后你可以使用zip:
Observable
.zip(
this.appService.GetCategories()
this.appService.GetCartItems()
)
.catch(err => this.toaster.error(err))
.subscribe(([categories, cartItems]) => {
this.appService.categories = categories;
this.appService.cart = cartItems;
});
我觉得'Observable.combineLatest'是正确的选择,而不是'Observable.zip'(如果我理解了这个问题)。自写这篇文章以来,事情可能会发生变化。当我使用Observable.zip而没有第三个参数时,其中一个输入是未定义的,取决于订阅何时触发。 –
这与concat()
,concatMap()
或最终concatAll()
最典型的是做取决于你的用例,并whetrher你需要按顺序或不叫这两种服务。
function GetCategories() {
return Observable.timer(1000).do(() => console.log('GetCategories()'));
}
function GetCartItems() {
return Observable.timer(1000).do(() => console.log('GetCartItems()'));
}
console.log('start...');
GetCategories()
.concatMap(() => GetCartItems())
.subscribe(() => console.log('done'));
这将打印到控制台:
start...
GetCategories()
GetCartItems()
done
每个项目被延迟,以显示这些被称为以此起彼伏。
如果您不需要保持相同的顺序,您可以使用merge()
或mergeMap()
。
见现场演示:https://jsbin.com/wawajob/1/edit
注意,使用zip()
可能有意外的行为。见https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/zip.md
http://*.com/questions/36712659/angular-2-two-backend-service-calls-on-success-of-first-service/36712707#36712707 – echonax