RxJS recipes: ”forkJoin” with the progress of completion for bulk network requests in Angular

As it often happens to me — this post is just a extension of my StackOverflow activity: -).

kysymys:

onko olemassa keinoa koota havaintojen lista yhteen niin, että saadaan kumulatiivinen tulos kuten forkJoin tekee, mutta saadaan jonkinlainen edistys, kun ne valmistuvat?

mukava tehtävä kustomoitujen RxJS-funktioiden luomiseen. Pannaan se täytäntöön!

katsotaanpa virallista dokumentaatiota:

forkJoin(…lähteet: mikä tahansa): havaittava<mikä tahansa>

Hyväksyy Array: n ObservableInput tai sanakirjan Object: n ObservableInput ja palauttaa Observable: n, joka lähettää joko joukon arvoja täsmälleen samassa järjestyksessä kuin hyväksytty joukko, tai arvosanakirja, joka on samassa muodossa kuin hyväksytty sanakirja.

toisin sanoen Forkjoin for Observables toimii samalla tavalla kuin Promise.kaikki toimii lupausten vuoksi.

tässä on marmorikaavio:

mahdollinen käyttötapaus sille on käynnissä monia rinnakkaisia verkkopyyntöjä-esimerkiksi hakemalla joitakin käyttäjäluettelon tietoja (jos API tukee vain käyttäjän noutoa kohti).

tässä on esimerkki:

pätkälinkki

tässä on koodilinkki, jolla voi pelata.
se toimii mukavasti, mutta entä jos pitää tietää jotain välitietoa, kuten kuinka monta pyyntöä on jo ratkaistu? Nykyisellä forkJoin-toteutuksella se on mahdotonta, mutta voimme luoda siitä oman versiomme ?.
OK, joten lyhyt agenda miten tämän forkJoinWithPercent pitäisi toimia:
Lähtö:
1. Se palauttaa korkeamman kertaluvun (HO) havaittavan (), joka emittoi kahden havaittavan joukon: .

<>Kopioi
*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. prosenttia$ – emittoi valmistumisprosentti (lukumäärä);
3. finalResult$ – lähettää lopullisen joukon arvoja lopussa (tai virhe, jos jokin todettavissa oleva argumentti lähettää virhearvon).
alustavasti käyttö näyttää tältä:

pätkä linkki

Toteutustiedot:

  1. forkJointWithProgress-funktiomme hyväksyy joukon havaittavia ja palauttaa korkeamman kertaluvun havaittavia.
  2. tämä palautettu havaittava pitäisi emitoida arvo (Käytämme (), että)
  3. haittavaikutukset lisätään kuhunkin kohtaan joukko argumentti havainnoitavissa laskea prosenttiosuus loppuun ja emit tämä arvo erityinen prosentti$ (käytämme finalize operaattori prosenttilaskennan ja käyttää aihe prosentteina$).
  4. finalResult$ tarjoaa normaalin rxjs trukin tuloksen.
  5. tulos havainnoitavissa pitäisi toimia itsenäisesti kunkin tilaajan osalta (wrap — toiminnallisuus rxjs lykkää toimintoa, jotta jokaiselle tilaajalle saadaan puhdas ajo-voit lukea lisää tästä jutusta).
  6. jos osa havaituista argumenteista lähettää virhettä-se levitetään lopullisille$ – tilaajille.

Packtpub.com ja olen valmistellut koko rxjs kurssin monia muita yksityiskohtia siitä, miten voit ratkaista jokapäiväisen kehittäjän tehtäviä tämän hämmästyttävän kirjaston. Se voi olla mielenkiintoinen aloittelijoille, mutta sisältää myös edistyneitä aiheita. Katsokaa!

Implementation

#1-2 hyväksymme joukon Observables ja pitäisi palata korkeamman kertaluvun Observable kanssa .

Ok, vain jalanjälki tulevasta toiminnostamme:

pätkä linkki

koska saimme arrayOfObservables (meidän ajax observables), joten iteroidaan yli ja lisätään pyydetty logiikka:

#3 lisäämällä sivuvaikutuksia argumentti Observables ja laskemalla prosenttiosuus.

Here is what we ’ ve got:

katkelma linkki

lisäämme enemmän toiminnallisuutta argumentti observables in array. Me iterate yli array ja soveltaa finalize operaattori kunkin havaittavissa.

finalize operator odottaa, kunnes tietty havainnoitavissa täydentää, sitten laskea prosenttiosuus suoritettujen havainnoitavien ja emit arvo prosenttia$Subject.

#4 soitetaan forkjoinille lopullisen tulosarvon saamiseksi

snipper link

Ok, käydään läpi tämä koodi:
forkJoin saa joukon argumenttihavaintoja, tilaa ne kaikki ja odottaa, kunnes ne ovat valmiit.
kun tulos on valmis-tap-operaattori lähettää viimeisen prosenttiarvon (100%) ja täyttää prosenttimäärän$ Subject (muistivuotojen estämiseksi).
lopulliset tulokset lähetetään tilaajille.

5 tämän funktion kääriminen ”defer”

RxJS defer-funktioon tarjoaa jokaiselle tilaajalle uuden havaittavan instanssin (takaisinkutsutoiminnon tulos). Tämä tarkoittaa, että jokainen tilaajistamme saa puhtaan ajon (ja laskurin = 0).

snippet link

Lets review how it works:

  1. saamme joukon observables (line1).
  2. Wrap result with RxJS defer to provide a clean run for each tilaaja (rivi 3)
  3. Create counter to calculate the procenture of completion and instantiate percent$ Subject to emit percent value (rivit 5-6).
  4. luomme uuden array iteroimalla yli alkuperäisen array ja lisäämällä uusia toimintoja finalize-laskemalla prosenttiarvo ja emittoimalla se, jos jotkut observables täydentää. (linjat 8-15)
  5. Soita Rx trukjoinille ja käytä hanaoperaattoria, jotta voit lähettää prosenttiosuuden 100, kun trukjoin saa lopullisen tuloksen. Määritä tulos finalResult$muuttuja (rivit 17-22).
  6. Return higher-order observable that will emit .

näin se toimii koodepenissä:

haarukkajoukko

entä sen käyttäminen kulmissa?Linkki tähän osioon

tämä toiminto on julkaistu myös npm — pakettina-rxjs-työkalupakkina, jotta voit käyttää sitä projekteissasi.

ja tässä on Stackblitzin Kulmademo, joka käyttää kyseistä pakettia syöttämään prosenttiarvoa kuormituspalkille:

kulmissa

lisälukema.

voit lukea lisää RxJS-operaattoreiden käyttötapauksista täältä:

  1. ”yritä uudelleen vs toista ”
  2. ” Rxjs: Managing Operator State ” Nicholas Jamieson.
  3. ”RxJS ’repeat’ operator — beginner necromancer guide”
  4. ”Throttling notifications from multiple users with Rxjs”
  5. Rxjs-toolkit — Rxjs Everyday Custom Operators by Jason Awbrey.
  6. backoff-rxjs — kokoelma hyödyllisiä Rxjs-operaattoreita käsittelemään Alex Okrushkon backoff-strategioita.

kuten tämä artikkeli? Pidetään yhteyttä Twitterissä!

alkaen kohdasta 4 rxjs-videokurssini ennakot henkilökunta tarkistetaan — joten jos tunnet RxJS: n jo — voit löytää jotain hyödyllistä myös sinulle: korkeamman kertaluvun havainnoitavat laitteet, anti-kuviot, aikataulut, yksikkötestaus jne! Kokeile!

* erityiskiitokset Lars Gyrup Brink Nielsenille, Nicholas Jamiesonille, Tim Deschryverille ja Michael Karénille tämän postauksen tarkistamisesta ja monista arvokkaista huomautuksista sen parantamiseksi!

Keskustele yhteisön kanssa

Vastaa

Sähköpostiosoitettasi ei julkaista.