Using the rxjs take() with Angular's http

Question

Let's say I have a function like this in a provider:

getAll(): Observable<CarModel[]> {
    return this.http.get<CarModel[]>(this.carUrl);
}

And in a component I have a function that uses this function of the provider:

getCars() {
        const that = this;
        this.carService.getAll().subscribe(function(cars) {
            that.factoryService.setCars(cars);
            this.unsubscribe();
        });
    }

Is it okay to replace that with a function that uses the take operator to avoid having to call unsubscribe()?

getCars() {
        const that = this;
        this.carService.getAll().take(1).subscribe(function(cars) {
            that.factoryService.setCars(cars);
        });
    }

I wonder if this can have any unexpected or unwanted behavior when used with Angular's Httpclient's methods? I've never seen the Angular's Httpclient used like that - that's why I'm asking.

When subscribing to observables from the `HttpClient` there is no reason to call `unsubscribe` at all. — Igor, Jan 10 '19 at 14:18
https://stackoverflow.com/questions/38008334/angular-rxjs-when-should-i-unsubscribe-from-subscription — martin, Jan 10 '19 at 14:20
https://medium.com/@benlesh/rxjs-dont-unsubscribe-6753ed4fda87 — martin, Jan 10 '19 at 14:20
[https://stackoverflow.com/a/42346203/1331040](https://stackoverflow.com/a/42346203/1331040) — Harun Yilmaz, Jan 10 '19 at 14:21

score 6 · Accepted Answer · answered Jan 10 '19 at 14:31

The HttpClient calls complete on the stream after a request completes. An Observable that calls complete signals that no more values will be emitted and so any subscribers will not receive any more values. This means that there is no reason to unsubscribe or use take with an http request.

getAll(): Observable<CarModel[]> {
  return this.http.get<CarModel[]>(this.carUrl); // <- Emits once and completes
}

Checkout this section from the docs. Note:

An observable from HttpClient always emits a single value and then completes, never to emit again.

score 1 · Answer 2 · answered Jan 10 '19 at 14:28

As you, I've never seen like this before.

I used to convert all http requests observables into promises:

In the MDN site, you can find this: The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

this.carService.getAll()
        .toPromise()
        .then((cars) => {
            that.factoryService.setCars(cars);
        }).catch((error) => {
            console.error(error);
        });

Using the rxjs take() with Angular's http

2 Answers2