订阅多个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，我觉得这是不正确的方法，这是一种回调地狱。

任何想法如何以更好的方式实现这个（如链接“然后”承诺）？

来源

2016-12-28 refactor

http://stackoverflow.com/questions/36712659/angular-2-two-backend-service-calls-on-success-of-first-service/36712707#36712707 – echonax

看起来像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; 
    });

来源

2016-12-28 12:16:38

我觉得'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

来源

2016-12-28 12:22:52 martin

订阅多个Observable in Angular 2

回答

相关问题