Subscribe to multiple Observables (like chaining then() in Promises)

Question

My Angular 2 application has 2 methods (GetCategories() and GetCartItems()) in a service , and both of these methods return Observable

Answer 1

This is most typically done with concat(), concatMap() or eventually concatAll() depending on your usecase and whetrher you need to call both services in order or not.

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'));

This prints to console:

start...
GetCategories()
GetCartItems()
done

Each item is delayed to show these are called in order one after another.

If you don't need to keep the same order you can use merge() or mergeMap().

See live demo: https://jsbin.com/wawajob/1/edit

Note that using zip() might have undesired behavior. See https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/zip.md

Answer 2

Looks like GetCartItems doens't depend on GetCategories. Then you can use 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;
    });