javascript - Rxjs toPromise() je zastarané

Čítal som, že toPromise() sa v RxJS 7 prestáva používať a bude odstránené v RxJS 8. Často som ho používal s async await syntaxou v Angulari na spracovanie HTTP volaní. Považuje sa to za anti pattern? Chápem koncept prúdov, ale HTTP volanie vydá len jednu hodnotu. Nerozumiem zmyslu používania observable pri jednoduchom HTTP volaní. Čo by som mal použiť ďalej? Mal by som plne prijať reaktívne programovanie?

Odpoveď č. 1

Prečo sa to deje? :

Ako tu bolo uvedené, toto sú hlavné dôvody, prečo je toPromise postupne vyraďované:

  1. Jedným z cieľov bolo odstrániť to z prototypu Observable a premeniť to na samostatnú úžitkovú funkciu.

  2. Pomenovanie toPromise nie je najlepšie. Najmä keď sa používa v kombinácii s await, čítanie nie je veľmi príjemné: await categories$.toPromise() vs await lastValueFrom(categories$)

  3. Typová informácia toPromise je nesprávna. Keď zdrojový Observable dokončil bez toho, aby niekedy vyslal jedinú hodnotu - vyriešil sa s undefined. V takom prípade by mal byť odmietnutý. Promise je „sľub“, že keď sa vyrieši, hodnota tam bude - aj keď je to undefined. Ale keď stream dokončí bez toho, aby niekedy niečo vyslal, nemôžete rozlíšiť medzi streamom, ktorý úmyselne vyslal undefined, a streamom, ktorý dokončil bez toho, aby niekedy niečo vyslal.

Čo by ste mali použiť ďalej? :

Ak naozaj trváte na tom robiť to sľubovou cestou, lastValueFrom/firstValueFrom. Inak by prechod na reaktívne programovanie bol tou správnou cestou.

Používanie toPromise (zastaralé) -

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

Používanie lastValueFrom (nové) -

import { lastValueFrom } from 'rxjs';

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

Tento odkaz by mal pomôcť -

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

Odpoveď č. 2

firstValueFrom a lastValueFrom sú určite lepšou alternatívou z mnohých dôvodov:

  1. Pomenovanie je čitateľnejšie a samo o sebe vysvetľujúce.
  2. Dodatočná možnosť vybrať buď prvú alebo poslednú hodnotu.
  3. Dodatočná schopnosť deklarovať predvolenú hodnotu v prípade, že pozorovateľ nevydá žiadnu hodnotu vôbec, napríklad takto await lastValueFrom(data$, {defaultValue: 'Niektorá predvolená hodnota'})

Pre viac informácií o tom si pozrite video nižšie:
https://www.youtube.com/watch?v=3aeK5SfWBSU

Odpoveď č. 3

Príklad kódu:

Zastaralé použitie:

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

Nový kód:

import { firstValueFrom } from 'rxjs';

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

Súvisiace články