Angular Academy · Oppitunti

rxMethod asynkroniseen työhön

Käsitelkää asynkronisia työnkulkuja rxMethodilla

Oppitunti 3/413 vaihetta

rxMethod asynkroniseen työhön on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Asynkronisuus SignalStoressa

Monet toiminnot ovat asynkronisia: tietojen lataaminen, viivästetty haku ja kyselyt. SignalStore tarjoaa rxMethod-toiminnon näiden reaktiivisten ja peruttavien asynkronisten työnkulkujen hallintaan.

rxMethod-perusteet

rxMethod luo RxJS-putken taustalla käyttävän metodin. Kutsutte sitä arvolla (tai signaalilla/Observablesilla), jolloin arvo syötetään virtaan.

import { rxMethod } from '@ngrx/signals/rxjs-interop';
import { pipe, switchMap, tap } from 'rxjs';

withMethods((store, api = inject(Api)) => ({
  load: rxMethod<string>(pipe(
    switchMap(id => api.getById(id)),
    tap(item => patchState(store, { current: item }))
  ))
}))

rxMethod-funktion kutsuminen

Kutsukaa sitä tavallisen metodin tavoin yksinkertaisella arvolla. Arvo siirtyy määrittelemäänne putkeen.

store.load('42');

Signaalin välittäminen

Voitte välittää signaalin rxMethod-funktiolle. Se suorittaa putken automaattisesti uudelleen aina signaalin muuttuessa, mikä sopii erinomaisesti reaktiiviseen lataamiseen.

selectedId = signal('1');
ngOnInit() {
  this.store.load(this.selectedId); // reloads when selectedId changes
}

switchMap peruuttaa vanhentuneen työn

switchMap-operaattorin käyttö tarkoittaa, että uusi arvo peruuttaa aiemman käynnissä olevan pyynnön. Näin vältetään kilpailutilanteet, joissa vanha hidas vastaus korvaisi uudemman vastauksen.

Lataustilan seuraaminen

Asettakaa latauslippu päälle toiminnon alussa ja poistakaa se valmistumisen yhteydessä, jotta käyttöliittymä voi näyttää latausilmaisimia.

load: rxMethod<string>(pipe(
  tap(() => patchState(store, { loading: true })),
  switchMap(id => api.getById(id).pipe(
    tap(item => patchState(store, { current: item, loading: false }))
  ))
))

Virheenkäsittely

Virheet on käsiteltävä putken sisällä, muuten virta päättyy ja metodi lakkaa toimimasta. Käyttäkää catchError-operaattoria sisäisessä Observablessa.

switchMap(id => api.getById(id).pipe(
  tap(item => patchState(store, { current: item, error: null })),
  catchError(err => {
    patchState(store, { error: err.message, loading: false });
    return EMPTY;
  })
))

Viivästetty haku

Koostakaa aikaan perustuvia operaattoreita kirjoittamalla tehtävään hakuun. Putki viivästää arvoja ja vaihtaa niiden välillä aivan kuten tavallinen RxJS-putki.

search: rxMethod<string>(pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(q => api.search(q)),
  tap(results => patchState(store, { results }))
))

Flattening-operaattorin valitseminen

Käyttäkää switchMap-operaattoria vanhentuneen työn peruuttamiseen, concatMap-operaattoria jonottamiseen, mergeMap-operaattoria rinnakkaiseen suorittamiseen ja exhaustMap-operaattoria uusien kutsujen ohittamiseen työn ollessa käynnissä. Valitkaa operaattori halutun rinnakkaisuuden perusteella.

Automaattinen siivous

Putken tilaus on sidottu storen elinkaareen. Kun store tuhotaan (jos se on komponentin laajuinen), virta puretaan, joten muistivuotoja ei synny eikä manuaalista unsubscribea tarvita.

Alustaminen luonnin yhteydessä

Yhdistäkää rxMethod withHooks-ominaisuuteen käynnistääksenne alustavan latauksen, kun store luodaan.

withHooks({
  onInit(store) { store.load('initial'); }
})

Pikatarkistus

Tarkistakaa rxMethod-osaamisenne.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Käytitte rxMethod-toimintoa asynkronisiin työnkulkuihin: kutsuitte sitä arvoilla tai signaaleilla, valitsitte flattening-operaattorin (switchMap vanhentuneen työn peruuttamiseen), seurasitte lataustilaa, käsittelitte virheet catchError-operaattorilla ja hyödynsitte tilausten automaattista siivousta.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 38
Oppitunnit: 144

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”rxMethod asynkroniseen työhön” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “rxMethod asynkroniseen työhön”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Angular Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”rxMethod asynkroniseen työhön”?

Käsitelkää asynkronisia työnkulkuja rxMethodilla Harjoittelet Angular Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Angular Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Angular Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”rxMethod asynkroniseen työhön”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Angular Academy-oppitunnilla?

Kyllä. Jokainen Angular Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: Angular Academy