Angular HttpClient Observables failing to auto-unsubscribe

Question

Angular HttpClient Observables failing to auto-unsubscribe

When I make an http call and subscribe to it, I notice that even after closing the component, the subscription is not destroyed and continues to run once. Shouldn't the http subscriptions be automatically removed when a component is destroyed?

Below is the method that is being called:

getCubes() {
    this.loading_cubes = true;
    this.urlService.getCubes().subscribe({
      next:(data:any) => {
        if (data.success) {
          this.cubesDataArray = data.data[0].response;
        } else {
          Swal.fire(data.status_message);
          console.log(data.error_message);
        }
        this.loading_cubes = false;
      },
      error:(err:any) => {
        console.log(err);
        Swal.fire('Opps an error occured');
        this.loading_cubes = false;
      }
    });
  }

And here's the service function that returns the http observable:

 getCubes() {
    return this.http.get(this.serviceURL + '/cubes', this.options);
  }

This issue is not isolated to just one case—it happens with every request I make. The pop-ups keep appearing even after I've closed the component.

Could it possibly be related to a setting in the tsconfig.json file?

angular typescript rxjs observable angular-httpclient

Answer 1

Answer №1

To properly clean up your subscription, make sure to utilize the onDestroy method:


class MyComponent {
    mySubscription = null
    ...

    loadData() {
        this.mySubscription = this.dataService.getData().subscribe({
            ...
        });
    }
    ngOnDestroy() {
        this.mySubscription.unsubscribe();
    }   
}

Answer 2

To properly clean up your subscription, make sure to utilize the onDestroy method:


class MyComponent {
    mySubscription = null
    ...

    loadData() {
        this.mySubscription = this.dataService.getData().subscribe({
            ...
        });
    }
    ngOnDestroy() {
        this.mySubscription.unsubscribe();
    }   
}

Answer 3

Answer №2

Matthew provided you with a comprehensive answer already. However, there are alternative options to consider in addition to his explanation.

If you want RxJS to only retrieve one result, you can use the following code:

this.urlService.getCubes().pipe(take(1)).subscribe({ ... });

The pipe(take(1)) method ensures that only one result is obtained from the observable.

Another approach is to convert the observable to a promise using the firstValueFrom function from RxJS. This would look like:

firstValueFrom(this.urlService.getCubes()).then({ ... });

You might be wondering why HttpClient behaves in this particular way. Allow me to provide some insight into it.

Methods such as get, put, post, delete, etc. of HttpClient return what is known as 'cold observables.' These observables are not executed unless there is a consumer at the end. If you do not subscribe to them, no request will be made.

This feature also allows you to create a 'paused request' and make multiple calls to it - for example, with multiple subscriptions.

Why would you need this? Let's take a look at this code snippet:

this.urlService.getCubes()
  .pipe(retry(3))
  .subscribe({
    ...
  });

In this scenario, I am utilizing the retry operator which catches errors and retries the request. It will attempt the request three times before giving up. If the first or second attempt is successful, it will not retry again.

This behavior is facilitated by HttpClient returning 'cold observables,' which necessitates the implementation of these solutions.

Additionally, this setup allows for the utilization of a 'cancelation token' mechanism, but that is a discussion for another time.

Answer 4

Matthew provided you with a comprehensive answer already. However, there are alternative options to consider in addition to his explanation.

If you want RxJS to only retrieve one result, you can use the following code:

this.urlService.getCubes().pipe(take(1)).subscribe({ ... });

The pipe(take(1)) method ensures that only one result is obtained from the observable.

Another approach is to convert the observable to a promise using the firstValueFrom function from RxJS. This would look like:

firstValueFrom(this.urlService.getCubes()).then({ ... });

You might be wondering why HttpClient behaves in this particular way. Allow me to provide some insight into it.

Methods such as get, put, post, delete, etc. of HttpClient return what is known as 'cold observables.' These observables are not executed unless there is a consumer at the end. If you do not subscribe to them, no request will be made.

This feature also allows you to create a 'paused request' and make multiple calls to it - for example, with multiple subscriptions.

Why would you need this? Let's take a look at this code snippet:

this.urlService.getCubes()
  .pipe(retry(3))
  .subscribe({
    ...
  });

In this scenario, I am utilizing the retry operator which catches errors and retries the request. It will attempt the request three times before giving up. If the first or second attempt is successful, it will not retry again.

This behavior is facilitated by HttpClient returning 'cold observables,' which necessitates the implementation of these solutions.

Additionally, this setup allows for the utilization of a 'cancelation token' mechanism, but that is a discussion for another time.

Angular HttpClient Observables failing to auto-unsubscribe

Answer №1

Answer №2

Similar questions

Incorporating a minute interval in Angular Material's time picker feature

The issue with the meta tag not updating in the view source seems to be related to

Troubleshooting Angular: Investigating why a component is failing to redirect to a different route

Getting an error in React when using Typescript with a functional component? The issue might be that you are trying to assign a type 'boolean' to a type 'ReactElement<any, any>'

Is it possible to extract a single element from an array that is stored as a standard Observable?

'map' is not defined in the current Typescript scope

MatDialog displaying no content

What is the best way to access a value from a settings.json file in an Angular .ts file?

There are occasional instances of phone skipping functions within a loop in Ionic 4

Oops! An unhandled promise error occurred when trying to fetch a URL with a status of 0. The response received has a status code of

I am having trouble retrieving child interface data from API using Angular. Can someone help me figure out what I am doing

The Angular 2 HTTP GET method is throwing a type 3 error when trying to access the

Display permanent components in Angular while nesting components

Adding a new row to an existing formArray in Angular: A step-by-step guide

In Angular, the text box in a dropdown will be enabled or disabled based on the chosen selection values

Tips for passing a usestate via props using interfaces in TypeScript and react?

Using TypeORM: Incorporating sub queries with queryBuilder

Tips for integrating the react-financial-charts library into your React and JavaScript project

Ignoring lines in code coverage using Istanbul is not an option that can be overlooked

What is the reason behind the varying display of values?