rxjs recipes:’ forkJoin ‘ med fremdriften for ferdigstillelse for bulk network requests in Angular

som det ofte skjer med meg — dette innlegget er bare en forlengelse av Min StackOverflow aktivitet: -).

Spørsmål:

er det en måte å samle en liste over observerbare sammen for å få kumulativt resultat som forkJoin gjør, men få en slags fremgang mens de er ferdige?

en fin oppgave for å lage tilpasset rxjs funksjon. La oss implementere det!

la oss ta en titt på offisiell dokumentasjon:

forkJoin(…kilder: any): Observerbar<any>

Aksepterer en Array av ObservableInput eller en ordbok Object av ObservableInput og returnerer en Observable som avgir enten en rekke verdier i nøyaktig samme rekkefølge som den passerte matrisen, eller en ordbok med verdier i samme form som den Passerte ordboken.

med andre ord, forkJoin for Observables fungerer pa samme mate Som Promise.alle arbeider For Løfter.

Her er et marmordiagram:

den mulige brukstilfelle for det kjører mange parallelle nettverk forespørsler-for eksempel hente noen usersList detaljer (HVIS API støtter bare per bruker hente).

her er et eksempel:

snippet link

Her er en codepen link å spille med.
det fungerer fint, men hva om vi trenger å vite litt mellomliggende informasjon som hvor mange forespørsler er løst allerede? Med dagens forkJoin implementering, er det umulig, men vi kan lage vår egen versjon av det ?.
OK, så kort agenda hvordan denne forkJoinWithPercent skal fungere:
Utgang:
1. Den returnerer høyere orden (HO) Observerbar () som avgir en rekke To Observerbare:.

<>Kopier
*Higher-order (HO) Observable - observable that emits other observables, so data flow should be handled with special flattening operators like mergeMap, switchMap, concatMap, etc... you can read more about it here and here.

2. prosent$ – avgir prosent av ferdigstillelse (tall);
3. finalResult$ – avgir en endelig rekke verdier på slutten (eller feil hvis noe argument observerbar avgir feilverdi).
Foreløpig bruk ser slik ut:

snippet link

Implementeringsdetaljer:

  1. vår forkJointWithProgress funksjon aksepterer en rekke Observerbare og bør returnere høyere Orden Observerbar.
  2. denne returnerte Observerbare skal avgi verdi (vi vil bruke () for det)
  3. Bivirkninger vil bli lagt til hvert element i en rekke argument Observerbare for å beregne prosentandelen av ferdigstillelse og avgi denne verdien med spesiell prosent$ (vi vil bruke sluttfør operatør for prosentberegning og bruk Emne som prosent$).
  4. finalResult$ gir standard RxJS forkJoin resultat.
  5. Resultat Observerbar skal fungere uavhengig for hver abonnent (wrap — funksjonalitet Med RxJS defer-funksjon for å gi en ren løp for hver abonnent-du kan lese mer om denne saken her).
  6. Hvis noen av argumentet Observables avgir feil – det vil bli forplantet til finalResult$ abonnenter.

Packtpub.com og jeg forberedte et helt rxjs-kurs med mange andre detaljer om hvordan du kan løse dine daglige utvikleroppgaver med dette fantastiske biblioteket. Det kan være interessant for nybegynnere, men inneholder også avanserte emner. Ta en titt!

Implementering

#1-2 vi aksepterer en rekke Observables og bør returnere høyere Orden Observerbar med .

Ok, bare et fotavtrykk av vår fremtidige funksjon:

snippet link

Gitt at vi fikk arrayOfObservables (våre ajax observerbare), så la oss iterere over og legge til forespurt logikk:

# 3 Legge til bivirkninger til argument Observerbare Og beregne prosentandel.

Her er hva vi har:

snippet link

Vi vil legge til mer funksjonalitet til argument observables i array. Vi itererer over en matrise og bruker sluttoperatør for hver observerbar.

sluttfør operatoren venter til spesifikke observerbare fullfører, og beregn deretter prosentandelen av fullførte observerbare og avgir verdi med prosent$Emne.

# 4 la oss ringe forkJoin for a fa en endelig resultatverdi

snipper link

Ok, la oss gå gjennom denne koden:
forkJoin får en rekke argument observables, abonnerer på dem alle og venter til de er ferdige.
når et resultat er klart — trykk operatøren avgir siste prosentverdi (100%) og fullfører prosent$ Emne (for å hindre minnelekkasjer).
Endelige resultater vil bli sendt ut til abonnenter.

5 Innpakning all denne funksjonen i’defer’

RxJS defer-funksjonen gir ny Observerbar forekomst (et resultat av tilbakeringingsfunksjonen) for hver abonnent. Dette betyr at hver av våre abonnenter vil få ren kjøre (og teller = 0).

snippet link

la oss se hvordan det fungerer:

  1. Vi får en rekke observables (line1).
  2. Bryt resultat Med RxJS utsette å gi en ren kjøre for hver abonnent (linje 3)
  3. Opprett teller for å beregne prosentandelen av ferdigstillelse og instantiate prosent$ Lagt avgi prosentverdi (linjer 5-6).
  4. vi lager en ny matrise ved å iterere over den opprinnelige matrisen og legge til ny funksjonalitet med sluttberegning-beregne prosentverdi og sende den ut hvis noen av observables fullfører. (linje 8-15)
  5. Ring Rx forkJoin og bruk tap operator for å kunne sende prosent 100 når forkJoin får et sluttresultat. Tilordne resultat til finalResult$variabel (linjer 17-22).
  6. Returner høyere ordre observerbar som vil sende ut .

for å pakke opp

slik fungerer det i en kodepen:

forkJoinWithPercent

hva med å bruke den I Angular?Link til denne delen

denne funksjonen er også publisert som en npm — pakke-rxjs-toolbox, slik at du kan bruke den i prosjektene dine.

Og her er En Stackblitz Angular demo som bruker den pakken til å mate prosentverdi for å laste bar:

I Vinkel

Ytterligere lesing.

du kan lese mer om rxjs operatører bruker saker her:

  1. «Prøv på nytt vs Gjenta»
  2. «RxJS: Administrerende Operatør Stat» Av Nicholas Jamieson.
  3. «rxjs ‘gjenta’ operatør — nybegynner necromancer guide»
  4. «Strupe meldinger fra flere brukere Med RxJS»
  5. Rxjs — toolkit-Rxjs Hverdags Tilpassede Operatører Av Jason Awbrey.
  6. backoff — rxjs-en samling av nyttige rxjs operatører å håndtere backoff strategier Av Alex Okrushko.

Liker du denne artikkelen? La oss holde kontakten På Twitter!

starter fra seksjon 4 av Mine rxjs video kurs fremskritt ansatte er anmeldt-så hvis du er kjent Med RxJS allerede-du kan finne noe nyttig for deg også: høyere orden observables, anti-mønstre, planleggere, enhetstesting, etc! Gi det et forsøk!

* Spesiell takk Til Lars Gyrup Brink Nielsen, Nicholas Jamieson, Tim Deschryver og Michael Karén for å ha gjennomgått dette innlegget og gjort mange verdifulle kommentarer for å gjøre det bedre!

Diskuter med samfunnet

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert.