0

Is there a way to unsubscribe to http call from angular service onDestroy hook.

P.S. I am aware of the rxjs 'take' operator or unsubscribing to service from component itself.

    import { HttpClient } from "@angular/common/http";
import { Injectable, OnDestroy } from "@angular/core";

@Injectable()
export class SampleService implements OnDestroy {
  constructor(private httpClient: HttpClient) {}

  getSampleData() {
    return this.httpClient.get("https://jsonplaceholder.typicode.com/todos/1");
  }
  ngOnDestroy(): void {
    // automatically unsubscribe to service.
  }
}
varunduttsharma7
  • 3
  • 3
  • 1
    Does this answer your question? [Is it necessary to unsubscribe from observables created by Http methods?](https://stackoverflow.com/questions/35042929/is-it-necessary-to-unsubscribe-from-observables-created-by-http-methods) – R. Richards Apr 28 '21 at 14:56
  • @R.Richards Thanks for the link. But when the service instance is getting destroyed with component, can we write some clean-up logic to check if any http call needs to be unsubscribed?? – varunduttsharma7 Apr 28 '21 at 17:44

1 Answers1

0

Services don't have a UI-driven lifecycle and hence no matter how much you implement the onDestroy it will never be called unless you manually call it yourself.

That's why we have tools, read APIs, like:

<div> {{ yourObservable$ | async | json }} </div>

@Component({...})
export class Component implements OnInit {
   yourObservable$: Observable<any>
   constructor(public yourService: TheService) {
       this.yourObservable$ = this.yourService.getSampleData()
   }
}

Async pipe notices the lifecycle-changes and subscribes and unsubsribes automatically whenever the component is removed

  • Subscription (which you can add other sybscriptions by calling .add) and on your component's onDestroy call subscription.unsubscribe()

Subscription.unsubscribe is what the async pipe is built upon, and you can also use it yourself

Some random IT boy
  • 7,569
  • 2
  • 21
  • 47
  • But we see that the non-singleton instance of angular service will call ngOndestroy of this service when the componenet providing the instance is destroyed?? I am looking for some kind of way to check if there are any subscribers still there for http call. – varunduttsharma7 Apr 28 '21 at 17:41
  • Usually when dealing with stuff like this: there's one golden rule that works fantastically and is pretty much how C programming language manages it: "If you're going to cook in the kitchen, leave it as you found it once you're done with it". So, if a component subscribes, then he should be responsible of unsubscribing. If you leave subscriptions open you're going to leak memory and lose performance (because browser will be busy executing useless subscription code). – Some random IT boy Apr 28 '21 at 21:04
  • If you want to perform some cleanup on the service side when the component gets destroyed, you may call `service.onDestroy()` from a component; but be warned; the service instance may be shared and if you do "dangerous" stuff you might mess up the state of other components. I highly suggest you stick to the `async` pipe – Some random IT boy Apr 28 '21 at 21:04