How to perform one async action after another without embedded subscriptions

Question

I would like to perform async actions one after another using rxjs. I know that embedding subscribe in a subscribe is not a good practice and there are some other rxjs operators (flatMap\mergeMap, do etc. using pipe).

I need to get the component queryparams, set a global variable (globalVar), and only then, continue with the next async action (this..doSomething()). This is my code using embedded subscriptions: *doSomething return an observable

this.route.paramMap.subscribe(params => 
    { 
      globalVar = + params['userId']; 
      this.<someService>.doSomething().subscribe(result => 
      {
        this.func1();
      });
    }

score 3 · Accepted Answer · answered Feb 03 '20 at 16:26

A perfect solution for the cases where you want to chain multiple observables is the switchMap operator.

this.route.paramMap
    .pipe(
      switchMap(params) => {
      globalVar = + params['userId']; 
      return this.<someService>.doSomething()
    })
    .subscribe(result=> {this.func1();})

The thing that switchMap will do is after getting the params from the this.route it will return a new observable, for which you can latter subscribe. The benefit of using switchMap in this case is that if there are changes inside the this.route.paramMap while the this.<someService>.doSomething() is processed, rxjs will kill the request that is being processed and start new one, by doing so the date in result inside the subscribe will always be relevant to the current value of paramMap.

score 1 · Answer 2 · answered Feb 03 '20 at 16:32

1

this.route.paramMap.pipe(
  switchMap(params => {
    globalVar = + params['userId'];
    return this.<someService>.doSomething().pipe(
      tap(() => this.func1())
    )
  })
).subscribe();

answered Feb 03 '20 at 16:32

Fmerco

1,160
5
20

verbal explanations are usually helpful too – con Feb 03 '20 at 18:52

score 0 · Answer 3 · answered Feb 03 '20 at 16:23

0

Async/await would be a way to make your code readable in the way that it can be read sequential. That is my preferred route after i also tried embedding observable over a few levels.

answered Feb 03 '20 at 16:23

WorksLikeACharm

384
1
6
14

How to perform one async action after another without embedded subscriptions

3 Answers3