Is it necessary to unsubscribe from observables created by Http methods?

by

So the answer is no, you don’t. Ng2 will clean it up itself.

The Http service source, from Angular’s Http XHR backend source:

enter image description here

Notice how it runs the complete() after getting the result. This means it actually unsubscribes on completion. So you don’t need to do it yourself.

Here is a test to validate:

  fetchFilms() {
    return (dispatch) => {
        dispatch(this.requestFilms());

        let observer = this._http.get(`${BASE_URL}`)
            .map(result => result.json())
            .map(json => {
                dispatch(this.receiveFilms(json.results));
                dispatch(this.receiveNumberOfFilms(json.count));
                console.log("2 isUnsubscribed",observer.isUnsubscribed);
                window.setTimeout(() => {
                  console.log("3 isUnsubscribed",observer.isUnsubscribed);
                },10);
            })
            .subscribe();
        console.log("1 isUnsubscribed",observer.isUnsubscribed);
    };
}

As expected, you can see that it is always unsubscribed automatically after getting the result and finishing with the observable operators. This happens on a timeout (#3) so we can check the status of the observable when it’s all done and completed.

And the result

enter image description here

So, no leak would exist as Ng2 auto unsubscribes!

Nice to mention: This Observable is categorized as finite, on contrary to the infinite Observablewhich is an infinite stream of data can be emitted like DOM click listener for example.

THANKS, @rubyboy for help on this.

More Related Contents:

  1. Angular2 watch for 302 redirect when fetching resource
  2. What is the difference between Promises and Observables?
  3. What is the difference between Subject and BehaviorSubject?
  4. Angular HTTP GET with TypeScript error http.get(…).map is not a function in [null]
  5. File Upload In Angular?
  6. Angular 2 http.post() is not sending the request
  7. Observable type error: cannot read property of undefined
  8. take(1) vs first()
  9. RxJS: takeUntil() Angular component’s ngOnDestroy()
  10. Angular Subscribe within Subscribe
  11. How to create an RXjs RetryWhen with delay and limit on tries
  12. Handling refresh tokens using rxjs
  13. Best way to “flatten” an array inside an RxJS Observable
  14. Set base url for angular 2 http requests
  15. How to make an http call every 2 minutes with RXJS?
  16. Angular 7 – nesting Observables
  17. Angular subscribe elegant
  18. Angular – POST uploaded file
  19. Making sure observables in for loop are all finished before executing other code
  20. How to use/import http module?
  21. Best way to import Observable from rxjs
  22. angular 2 http withCredentials
  23. Angular 2 – Routing – CanActivate work with Observable
  24. rxjs/Subject.d.ts error : Class ‘Subject’ incorrectly extends base class ‘Observable’
  25. How to make nested Observable calls in Angular2
  26. Property ‘toPromise’ does not exist on type ‘Observable’
  27. How to return value inside subscribe Angular 4
  28. Do I need to `complete()` takeUntil Subject inside ngOnDestroy?
  29. How to send 1000 XHTTP Requests with maximum number of parallel requests
  30. Do we need to unsubscribe from observable that completes/errors-out?

Leave a Comment