RxJS receptek: ‘forkJoin’ a tömeges hálózati kérelmek befejezésének előrehaladásával Angular

ahogy gyakran történik velem — ez a bejegyzés csak a StackOverflow tevékenységem meghosszabbítása:-).

kérdés:

van-e mód arra, hogy összegyűjtsük a megfigyelhető elemek listáját, hogy kumulatív eredményt kapjunk, mint forkJoin, de valamilyen haladást érjünk el, amíg befejeződnek?

egy szép feladat létrehozására egyéni RxJS funkciót. Hajtsuk végre!

vessünk egy pillantást a hivatalos dokumentáció:

forkJoin(…sources: any): megfigyelhető<bármely>

elfogadja a Array a ObservableInput vagy egy szótár Object a ObservableInput és visszaadja a Observable bocsát ki vagy egy tömb értékek pontosan ugyanabban a sorrendben, mint az átadott tömb, vagy az átadott szótárral azonos alakú értékek szótára.

más szavakkal, a Forkjoin for Observables ugyanúgy működik, mint az Promise.minden ígéretért dolgozik.

itt van egy márvány diagram:

a lehetséges felhasználási eset sok párhuzamos hálózati kérést futtat — például néhány felhasználói lista részletének lekérése (ha az API csak egy felhasználói lekérést támogat).

íme egy példa:

kódrészlet link

itt van egy codepen link játszani.
jól működik, de mi van, ha tudnunk kell néhány köztes információt, például, hogy hány kérést oldottak meg már? A jelenlegi forkJoin megvalósítással lehetetlen, de létrehozhatjuk saját verzióját ?.
OK, tehát rövid napirend hogyan kell működnie ennek a fork joinwithpercentnek:
kimenet:
1. Magasabb rendű(HO) megfigyelhető ( ) értéket ad vissza, amely két megfigyelhető tömböt bocsát ki: .

<>másolás
*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. százalék$ – a teljesítés százalékos arányát bocsátja ki (Szám);
3. finalResult$ – a végén egy végső értéktömböt bocsát ki (vagy hibát, ha valamilyen megfigyelhető argumentum hibaértéket bocsát ki).
az előzetes használat így néz ki:

kódrészlet link

megvalósítás részletei:

  1. a forkJointWithProgress függvényünk egy sor megfigyelhető elemet fogad el, és magasabb rendű megfigyelhető értéket ad vissza.
  2. ez a visszaadott megfigyelhető értéket kell kibocsátania (a () – T fogjuk használni)
  3. a mellékhatások minden elemhez hozzáadódnak egy argumentum-megfigyelhető tömbben a Befejezés százalékának kiszámításához, és ezt az értéket speciális százalékos$ – val bocsátjuk ki (a százalékos számításhoz a finalize operátort fogjuk használni, a tárgyat pedig százalék$ – ként használjuk).
  4. finalResult$ szabványos RxJS forkJoin eredmény.
  5. a megfigyelhető eredménynek minden előfizetőnél függetlenül kell működnie (wrap funkció az RxJS halasztási funkcióval, hogy minden előfizető számára tiszta futást biztosítson — erről az esetről itt olvashat bővebben).
  6. ha néhány argumentum megfigyelhető hibát bocsát ki — a finalResult$ előfizetőknek továbbítódik.

Packtpub.com elkészítettem egy egész RxJS tanfolyamot, sok más részletgel arról, hogyan oldhatja meg mindennapi fejlesztői feladatait ezzel a csodálatos könyvtárral. Érdekes lehet A kezdők számára, de fejlett témákat is tartalmaz. Nézd meg!

megvalósítás

#1-2 elfogadunk egy sor megfigyelhető és vissza kell térnie magasabb rendű megfigyelhető .

Ok, csak egy lábnyom a jövőbeli funkciónkról:

kódrészlet link

mivel arrayOfObservables-t (ajax observables) kaptunk, ezért ismételjük át és adjuk hozzá a kért logikát:

#3 mellékhatások hozzáadása az argumentum Observables-hez és a százalék kiszámítása.

itt van, amit kaptunk:

kódrészlet link

további funkciókat adunk hozzá a tömbben megfigyelhető argumentumokhoz. Iterálunk egy tömb felett, és minden megfigyelhető esetén véglegesítjük az operátort.

a finalize operátor megvárja, amíg az adott megfigyelhető befejeződik, majd kiszámítja a befejezett megfigyelések százalékos arányát, és kibocsátja az értéket a % $Subject értékkel.

#4 hívjuk a forkJoin-t a végeredmény értékének megszerzéséhez

snipper link

Ok, menjünk át ezt a kódot:
forkJoin kap egy sor érv megfigyelhető, feliratkozik mindet, és vár, amíg azok teljes.
ha az eredmény készen áll — a tap operátor kiadja az utolsó százalékos értéket (100%), és befejezi a százalékos$ tárgyat (a memóriaszivárgás megelőzése érdekében).
a végeredményeket az előfizetők kapják meg.

5 az összes funkció becsomagolása a ‘halasztásba’

az RxJS halasztási függvény új megfigyelhető példányt biztosít (visszahívási funkciójának eredményeként) minden előfizető számára. Ez azt jelenti, hogy minden előfizetőnk tiszta futást kap (és számláló = 0).

kódrészlet link

áttekinthetjük, hogyan működik:

  1. kapunk egy sor megfigyelhető (line1).
  2. Wrap eredmény RxJS halasztással, hogy tiszta futást biztosítson minden előfizető számára (3.sor)
  3. hozzon létre számlálót a teljesítés százalékának kiszámításához és a százalék százalékának kiszámításához$ a százalékos érték kibocsátásához (5-6. sor).
  4. új tömböt hozunk létre az eredeti tömb iterálásával, és új funkciókat adunk hozzá a véglegesítés – százalékos érték kiszámításával és kibocsátásával, ha néhány megfigyelhető befejeződik. (8-15 vonalak)
  5. hívja az Rx forkJoin-t, és alkalmazza a tap operátort, hogy 100 százalékot küldjön, amikor a forkJoin megkapja a végeredményt. Hozzárendelése eredmény finalResult$változó (vonalak 17-22).
  6. visszatérés magasabb rendű megfigyelhető, hogy bocsát ki .

hogy lezárja

itt van, hogyan működik a codepen:

forkJoinWithPercent

mi a helyzet az Angular használatával?Link erre a szakaszra

ez a funkció npm csomagként is megjelenik – rxjs-toolbox így használhatja a projektjeiben.

és itt van egy Stackblitz Angular demo, amely ezt a csomagot használja a betöltési sáv százalékos értékének betöltésére:

szögletes

további olvasás.

az RxJS operátorok eseteiről itt olvashat bővebben:

  1. “próbálja újra vs ismétlés “
  2. ” Rxjs: irányító Üzemeltető állam ” Nicholas Jamieson.
  3. “RxJS ‘repeat’ operátor — kezdő nekromanta útmutató”
  4. “fojtás értesítések Több felhasználó RxJS”
  5. rxjs-toolkit — Rxjs mindennapi egyéni szereplők Jason Awbrey.
  6. backoff-rxjs — a gyűjtemény hasznos rxjs szereplők foglalkozni backoff stratégiák Alex Okrushko.

tetszik ez a cikk? Tartsuk a kapcsolatot a Twitteren!

az rxjs videó tanfolyamom 4. szakaszától kezdve az előlegek személyzetét felülvizsgálják — tehát, ha már ismeri az RxJS-t — találhat valami hasznosat az Ön számára is: magasabb rendű megfigyelések, anti-minták, ütemezők, egységtesztek stb! Próbáld ki!

*Külön köszönet Lars Gyrup Brink Nielsennek, Nicholas Jamiesonnak, Tim Deschryvernek és Michael Kar-nak, hogy áttekintették ezt a bejegyzést és sok értékes megjegyzést tettek, hogy jobbá tegyék!

beszélgetés a közösséggel

Vélemény, hozzászólás?

Az e-mail-címet nem tesszük közzé.