RxJS Observables nested subscriptions?
Solution 1:
As mentioned in comments, you are looking for the flatMap
operator.
You can find more details in previous answers :
- How to do the chain sequence in rxjs
- Why do we need to use flatMap?
Your example would read as :
this.returnsObservable1(...)
.flatMap(success => this.returnsObservable2(...))
.flatMap(success => this.returnsObservable3(...))
.subscribe(success => {(...)});
Solution 2:
Previously answered for RxJS 5, I ended up on this page whilst using 6.
In the case you're on 6 as well (and I think you should be by now) you can use flatmap
as an operator within pipe
.
Modified the example code of @user3743222:
this.returnsObservable1(...)
.pipe(
flatMap(success => this.returnsObservable2(...)),
flatMap(success => this.returnsObservable3(...))
)
.subscribe(success => {(...)});
Solution 3:
The switchMap operator can also be useful. Some examples which describe the usefulness of switchMap compared to nested subscriptions can be found here:
- situation with nested subscriptions
This codepen gives a demo: https://codepen.io/anon/pen/zdXBvP?editors=1111
Rx.Observable
.interval(5000)
.subscribe((val) => {
console.log("outer:", val);
Rx.Observable
.interval(1000)
.subscribe((ival) => {
console.log("inner:", val, ival);
});
});
- situation with switchMap
This codepen gives a demo: https://codepen.io/anon/pen/xLeOZW?editors=1111
Rx.Observable
.interval(5000)
.switchMap((val) => {
console.log("outer:", val);
return Rx.Observable.interval(1000).map((ival) => [val, ival]);
})
.subscribe((val) => {
console.log("inner:", val[0], val[1]);
});