Complete not getting called in Observable subscribe method

Question

I am working on the angular application and I am trying to use RxObservable. Below is the sample code.

getMyData(){
 console.log('get my account data called');
  this.AccountService
    .getMyAccountData()
    .filter(_res => _res !== null)
    .takeUntil(this.ngUnsubscribe)
    .subscribe({
        next: _response => {console.log('call finished');}
        error: error => {
            console.log('had an error');
            handleHttpError(error);
       },
       complete: () => {
           console.log('account data loaded is being set');
           this.accountDataLoaded = true;
       }
    });
}

Now this is an angular 2 app (Single page application). When I reload the page, the complete part of above function gets called and this.accountDataLoaded is true.

However, If I move to other component and come back to this one, the complete is not getting called and accountDataLoaded stays false.

I see there's no error on the console as well since I am logging the error as you can see above.

I am thinking either filter or takeUntil function on that observable are causing that but I am not sure.

Heliograph

show us where you're calling this function, also show us the ngUnsubscribe – Southeastwardly

Can you show us how you have your component set up and how this method is getting called in it? – Savoury

I'm not sure why complete is not getting fired without more context, but if this is an observable from an HTTP call, HTTP observables always fire once and then complete so you don't typically need to use a complete callback in addition to success. – Whiffler

Since here you are not saving this subscription, the ngUnsubscribe is not in context. Account data 'should not be' null regardless of any number of calls. Put a debugger inside the service call to see if its getting hit properly or not. Looks like some other conditional is preventing the call to even happen – Strahan

Also you can comment out the filter and takeUntill calls just to see if your service calls are happening in other case.. Just to pinpoint what can be the issue – Strahan

Answer 1

With RXjs behaviour complete is not been called if error is called. In your case you need do the following thing.

  getMyData(){
 console.log('get my account data called');
  this.AccountService
    .getMyAccountData()
    .filter(_res => _res !== null)
    .takeUntil(this.ngUnsubscribe)
    .subscribe({
        next: _response => {console.log('call finished');}
        error: error => {
            console.log('had an error');
            handleHttpError(error);
       },
       complete: () => {
           console.log('account data loaded is being set');
           this.accountDataLoaded = true;
       }
    }).add(() => {
         //Called when operation is complete (both success and error)
    });
}

Shamblin

So does it get called on success ? usually one would think it as finally in a try catch ... but it seems not the same at the same time confusing when actually it is called 😅 – Charlena