rxjs observable.pipe(take(1)) vs toPromise

George Tarida

Recently I've been moved to a new project which uses angular 6 as frontend framework and spring for REST services.

The project is in development for 2 years now and what I've observed was that almost all HTTP request made with angular HttpClient is then piped to take filter from rxjs. All REST APIs emit only one value. There's no need for manual cancellation and the laziness property of observables.

My intuition is that using toPromise() would be a better way to code.

What are your thoughts?

  //customer-service.ts
  constructor(private http: HttpClient) {

  }

  public getCustomers() {
     return http.get('/customers');
  }

  //component.ts
  public ngOnInit() {
      this.customerService.getCustomers().pipe(take(1)).subscribe((customers) => {
           //do some stuff
      })
  }

My proposed approach:

  //customer-service.ts
  constructor(private http: HttpClient) {

  }

  public getCustomers() : Promise<Array<Customer>> {
     return http.get('/customers').toPromise();
  }

  //component.ts
  public ngOnInit() {
      this.customerService.getCustomers().then((customers: Array<Customer>) => {
         //do some stuff
      })
  }

I think that my approach is better because it is strongly typed and it's cleaner.

user4676340

Going from observables to promises is a step back.

It's like going from a Porsche 911 to a Fiat multipla.

So no, you shouldn't use toPromise(), and no, your way isn't "better" (that's some ego there buddy !)

I think that my approach is better because it is strongly typed and it's cleaner.

Typing an HTTP answer isn't depending on pormises or observables, but on the developer himself. And cleaner is a matter of perspective, personally I hate seeing toPromise()s.

And the major drawback of your solution is that once converted to a promise, you can't pipe anything anymore, making your functions less versatile.

But their code isn't the best either. Usually this kind of behavior is used for stores and caches, are you sure you didn't omit something ?

Anyway, if not, and I only rely on the code provided, this would be the right code :

public getCustomers() {
  return http.get<Customer[]>('/customers');
}

....

public ngOnInit() {
  this.customerService.getCustomers()
    .subscribe((customers) => {...})
}

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

What the unexpected behavior Observable RxJS with async functions and toPromise?

.toPromise() and lastValueFrom() in rxjs

Rxjs toPromise() deprecated

.then() is never called on Observable.toPromise()

RxJS: Observable.create() vs. Observable.from()

Rxjs: Observable.combineLatest vs Observable.forkJoin

Rxjs: Difference between Observable.First vs Single vs Filter

RxJS .toPromise returns only one value

How to merge or groupBy toPromise via RxJs?

Has no exported member 'toPromise' rxjs- 5.5.2

How to handle .toPromise() deprecation with RXJS and Angular 13

Property 'toPromise' does not exist on type 'Observable<Response>'

Property 'toPromise' does not exist on type 'Observable<Response>

Angular RxJS Observable: takeUntil vs. unsubscribe with a Subscription

RxJS "throw new Error" vs "Observable.throw"

RXJS observable in observable

Angular Universal RxJs "Observable_1.Observable.throw is not a function"

is Observable.toPromise and Observable.last().subscribe are identical

Angular/rxjs: Why don't I have to import toPromise anymore?

Difference in importing Observable from 'rxjs/Observable' and 'rxjs'

RxJs Observable in Observable from Array

Angular / RxJS Multicasting Observable of Observable

Import of Observable rxjs/Observable is not working

Observable toPromise() get all data sent over next()

What should I use instead of toPromise() when using await on an Observable?

http provider Observable.toPromise() not working as expected in promise chains

angular Firestore: Observable.toPromise() versus Observalble.firstValueFrom();

RxJS call function 1 second after subsccribe to an observable

rxjs__WEBPACK_IMPORTED_MODULE_1__.Observable.throw is not a function