How do I make sure one Subcription finishes before another?

Question

globleVariable: any;

ngOnInit() {
    // This doesn't work. methodTwo throws error saying "cannot read someField from null. "
    this.methodOne();
    this.methodTwo();
}

methodOne() {
    this.firstService.subscribe((res) => { this.globleVariable = res });
}

methodTwo() {
    this.secondService.subscribe((res) => { console.log(this.globleVariable.someField) });
}

As shown above, methodOne set the value of globleVariable and methodTwo uses it, therefore the former must finish running before the latter.

I am wondering how to achieve that.

Answer 1

Instead of subscribing in the methods, combine them into one stream and subscribe to that in ngInit(). You can use tap to perform the side effect of updating globaleVariable that you were previously performing in subscribe().

In the example below the "methods" are converted into fields since there is no reason for them to be methods anymore (you can keep them as methods if you want). Then the concat operator is used to create a single stream, where methodOne$ will execute and then when it's complete, methodTwo$ will execute.

Because concat executes in order, you are guaranteed that globaleVariable will be set by methodOne$ before methodTwo$ begins.

globleVariable: any;
methodOne$ = this.someService.pipe(tap((res) => this.globleVariable = res));
methodTwo$ = this.someService.pipe(tap((res) => console.log(this.globleVariable.someField));

ngOnInit() {
  concat(this.methodOne$, this.methodTwo$).subscribe();
}

Answer 2

You can create a subject for which observable 2 will wait to subscribe like below :-

globalVariable: any;

subject: Subject = new Subject();

methodOne() {
    this.someService.subscribe((res) => { this.globleVariable = res; this.subject.next(); });
}

methodTwo() {
    this.subject.pipe(take(1), mergeMap(() => this.someService)).subscribe((res) => { 
          console.log(this.globleVariable.someField) });
}

Answer 3

The only way to guarantee a method call after a subscription yields is to use the subscription callbacks.

Subscriptions have two main callbacks a success and a failure.

So the way to implement a method call after the subscription yeilds is to chain it like this:

globleVariable: any;

ngOnInit() {
    this.methodOne();
}

methodOne() {
    this.someService.subscribe((res) => {
       this.globleVariable = res
       this.methodTwo(); // <-- here, in the callback
    });
}

methodTwo() {
    this.someService.subscribe((res) => { console.log(this.globleVariable.someField) });
}

You might want to chain the calls with some other rxjs operators for a more standard usage.

ngOnInit() {
  this.someService.method1.pipe(
    take(1),
    tap(res1 => this.globleVariable = res1)
    switchmap(res1 => this.someService.method2), // <-- when first service call yelds success
    catchError(err => { // <-- failure callback
                console.log(err);
                return throwError(err)
            }),
  ).subscribe(res2 => { //  <-- when second service call yelds success
    console.log(this.globleVariable.someField) });
  });
}

Please remember to complete any subscriptions when the component is destroyed to avoid the common memory leak.

Answer 4

my take,

so it's a bit confusing when you use same service that throws different results, so instead of someService I used firstService and secondService here.

this.firstService.pipe(
  switchMap(globalVariable) => 
    this.secondService.pipe(
      map(fields => Object.assign({}, globalVariable, { someField: fields }))
    )
  )
).subscribe(result => {
  this.globalVariable = result;
})

What I like about this approach is that you have the flexibility on how you want to use the final result as it is decoupled with any of the property in your class.