javascript - Rxjs toPromise() deprecated - Stack Overflow

admin管理员组

文章数量:1134246

I have read that toPromise() is being deprecated in RxJS 7 and will be removed in RxJS 8. I have often used it with async await syntax in angular to handle http calls. Is it considered an anti pattern? I understand the concept of streams but an http call only emit a single value. I don't get the point of observable for a simple http call. What should I use next? should I fully embrace reactive programming?

I have read that toPromise() is being deprecated in RxJS 7 and will be removed in RxJS 8. I have often used it with async await syntax in angular to handle http calls. Is it considered an anti pattern? I understand the concept of streams but an http call only emit a single value. I don't get the point of observable for a simple http call. What should I use next? should I fully embrace reactive programming?

• javascript
• angular
• typescript
• rxjs

Share Improve this question Follow asked Apr 11, 2021 at 11:11 MatiasMatias 1,45033 gold badges99 silver badges1414 bronze badges 1

• 2 As is conventional, the alternatives are provided in the deprecation: github.com/ReactiveX/rxjs/commit/… – jonrsharpe Commented Apr 11, 2021 at 11:23

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 158

Why is this happening?

As mentioned here, these are the main reasons why toPromise is being deprecated:

1. One goal was to remove it from the Observable prototype and turn it into a standalone util function.

2. The naming of toPromise is not the best. Especially when used in combination with await it does not read very well: await categories$.toPromise() vs await lastValueFrom(categories$)

3. The type information of toPromise is wrong. When the source Observable completed without ever emitting a single value - it resolved with undefined. It should reject in that case. A Promise is a "promise" that when it resolves a value will be there - and be it undefined. But when the stream completes without ever emitting a value you can't differentiate between a stream that a emitted undefined on purpose and a stream that completed without ever emitting anymore

What should you use next?

If you really insist doing it the promise way, lastValueFrom/firstValueFrom. Otherwise switching to reactive programming would be the way to go.

Using toPromise ( deprecated ) -

public async loadCategories() {
    this.categories = await this.inventoryService
      .getCategories()
      .toPromise()
}

Using lastValueFrom ( new ) -

import { lastValueFrom } from 'rxjs';

public async loadCategories() {
    const categories$ = this.inventoryService.getCategories();
    this.categories = await lastValueFrom(categories$);
} 

This link should help -

https://indepth.dev/posts/1287/rxjs-heads-up-topromise-is-being-deprecated

firstValueFrom and lastValueFrom is definitly a better alternative for many reasons:

1. The naming is more readable and self explanatory.
2. The additional ability to select either first or last value.
3. The additional ability to declare a default value in case the observable didn't emit any value at all like so await lastValueFrom(data$, {defaultValue: 'Some default value'})

For more about this checkout the video below:
https://www.youtube.com/watch?v=3aeK5SfWBSU

Code example:

Deprecated use:

await this.http.post<boolean>(`/someApi`).toPromise()
  .then((value) => {
    console.log(`Result: ` + value);
  })

New code:

import { firstValueFrom } from 'rxjs';

await firstValueFrom(this.http.post<boolean>(`/someApi`))
  .then((value) => {
    console.log(`Result: ` + value);
  })

For the most stubborn, I've found this workaround to keep toPromise() forever. Put this in your main.ts or similar (the file that gets to boostrap the entire application):

declare module "rxjs" {
    interface Observable<T> {
        /**
         * Extension method. Applies 'lastValueFrom' to Observable<T>.
         */
        toPromise(): Promise<T | undefined>;
    }
}

Observable.prototype.toPromise = function <T>(this: Observable<T>): Promise<T> {
    return lastValueFrom(this);
};

The first part declares the new typing for toPromise, and the second bit actually implements it. This works already while toPromise hasn't been yet removed, and will continue working going forward.

The following code is what I personally used:

// From my Component
const apiResponse = await lastValueFrom(this.postSomethingAPI(somethingId, somethingElseId));

// From my Service
postSomethingAPI = (somethingId: string, somethingElseId: string) => {
   const queryParams = `someParameter`;
   const packagedData = {
      somethingId: somethingId,
      somethingElseId: somethingElseId,
   };
   return this.http.post<any>(BACKEND_URL + queryParams, packagedData);
};

本文标签： javascriptRxjs toPromise() deprecatedStack Overflow