How do I make sure one Subcription finishes before another?-CodePudding

globleVariable: any;

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

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

methodTwo() {
    this.someService.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.

CodePudding user response：

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

CodePudding user response：

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();
}

CodePudding user response：

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.

CodePudding user response：

I think the problem here is that globleVariable is a property so you should use this.globleVariable