RxJS recept: ’forkJoin’ med färdigställandet av bulknätverksförfrågningar i Angular

som det ofta händer med mig — det här inlägget är bara en förlängning av min StackOverflow-aktivitet: -).

fråga:

finns det ett sätt att samla en lista över observerbara tillsammans för att få kumulativt resultat som forkJoin gör, men får någon form av framsteg medan de slutar?

en trevlig uppgift för att skapa anpassade RxJS funktion. Låt oss genomföra det!

Låt oss ta en titt på officiell dokumentation:

forkJoin(…källor: någon): observerbar<någon>

accepterar en Array av ObservableInput eller en ordbok Object av ObservableInput och returnerar en Observable som avger antingen en array med värden i exakt samma ordning som den passerade arrayen, eller en ordlista med värden i samma form som den godkända ordlistan.

med andra ord, forkJoin för observerbara fungerar på samma sätt som löfte.allt fungerar för löften.

här är ett marmordiagram:

det möjliga användningsfallet för det kör många parallella nätverksförfrågningar-till exempel hämtar vissa användarlistdetaljer (om API endast stöder per användarhämtning).

här är ett exempel:

utdrag länk

här är en codepen länk för att spela med.
det fungerar bra men vad händer om vi behöver veta lite mellanliggande information som hur många förfrågningar som redan har lösts? Med nuvarande forkjoin-implementering är det omöjligt men vi kan skapa vår egen version av det ?.
OK, så kort agenda hur denna forkJoinWithPercent ska fungera:
utgång:
1. Den returnerar högre ordning (HO) observerbar () som avger en matris med två observerbara: .

<>kopiera
*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. procent$ – avger procentuell slutförande (antal);
3. finalResult$ – avger en slutlig uppsättning värden i slutet (eller fel om något observerbart argument avger felvärde).
preliminärt användning ser ut så här:

utdrag länk

genomförande detaljer:

  1. vår forkJointWithProgress-funktion accepterar en rad observerbara och bör returnera högre ordningens observerbara.
  2. denna returnerade observerbara bör avge värde (vi kommer att använda () för det)
  3. biverkningar kommer att läggas till varje objekt i en array av argument observerbara för att beräkna procentuell slutförande och avge detta värde med special procent$ (vi kommer att använda finalize operator för procentuell beräkning och använda ämne som procent$).
  4. finalresultat$ ger standard RxJS forkJoin resultat.
  5. resultat observerbart ska fungera oberoende för varje abonnent (wrap — funktionalitet med rxjs defer-funktion för att ge en ren körning för varje abonnent-du kan läsa mer om det här fallet här).
  6. om några av argumentet observerbara avger fel – det kommer att fortplantas till finalResult $ abonnenter.

Packtpub.com och jag förberedde en hel rxjs-kurs med många andra detaljer om hur du kan lösa dina dagliga utvecklaruppgifter med detta fantastiska bibliotek. Det kan vara intressant för nybörjare men innehåller också avancerade ämnen. Ta en titt!

implementering

#1-2 vi accepterar en rad observerbara och bör returnera högre ordning observerbar med .

Ok, bara ett fotavtryck av vår framtida funktion:

snippet link

med tanke på att vi fick arrayOfObservables (våra Ajax observables), så låt oss iterera över och lägga till begärd logik:

#3 Lägga till biverkningar till argument observerbara och beräkningsprocent.

här är vad vi har:

utdrag länk

vi kommer att lägga till fler funktioner till argument observerbara i array. Vi iterera över en array och tillämpa slutföra operatör för varje observerbar.

Slutför operator väntar tills specifika observerbara Slutför, beräkna sedan procentandelen slutförda observerbara och avge värde med procent$ämne.

# 4 Låt oss ringa forkJoin för att få ett slutresultat värde

snipper link

Ok, låt oss gå igenom den här koden:
forkJoin får en rad argument observerbara, prenumererar på dem alla och väntar tills de är färdiga.
när ett resultat är klar-tap operatör avger sista procentvärde (100%) och slutför procent$ ämne (för att förhindra minnesläckor).
slutresultat kommer att släppas ut till prenumeranter.

5 inslagning all denna funktion i ’defer’

rxjs defer funktion ger ny observerbar instans (ett resultat av dess återuppringning funktion) för varje abonnent. Detta innebär att var och en av våra abonnenter kommer att få ren körning (och counter = 0).

utdrag länk

låter granska hur det fungerar:

  1. vi får en rad observerbara (line1).
  2. Wrap-resultat med rxjs-uppskjutning för att ge en ren körning för varje abonnent (rad 3)
  3. skapa räknare för att beräkna procentandelen slutförande och instantiera procent$ med förbehåll för att avge procentvärde (rader 5-6).
  4. vi skapar en ny array genom att iterera över den ursprungliga arrayen och lägga till ny funktionalitet med finalize – beräkna procentvärde och avge det om några av de observerbara Slutför. (linjer 8-15)
  5. Ring Rx forkJoin och använd tap operator för att kunna skicka procent 100 när forkJoin får ett slutresultat. Tilldela resultat till finalResult $ variabel (linjer 17-22).
  6. returnera högre ordning observerbar som kommer att avge .

för att avsluta

så här fungerar det i en codepen:

forkJoinWithPercent

vad sägs om att använda den i vinkel?Länk till detta avsnitt

denna funktion publiceras som ett npm-paket också-rxjs-toolbox så att du kan använda den i dina projekt.

och här är en Stackblitz Angular demo som använder det paketet för att mata procentvärde för att ladda bar:

i vinkel

Ytterligare läsning.

du kan läsa mer om rxjs operatörer använder fall här:

  1. ”försök igen vs upprepa”
  2. ”RxJS: Managing Operator State” av Nicholas Jamieson.
  3. ”rxjs’ upprepa ’operatör-nybörjare necromancer guide”
  4. ”strypning meddelanden från flera användare med RxJS”
  5. rxjs-toolkit — Rxjs vardagliga anpassade operatörer av Jason Awbrey.
  6. backoff-rxjs-en samling av hjälp rxjs operatörer att ta itu med backoff Strategier av Alex Okrushko.

Gillar du den här artikeln? Låt oss hålla kontakten på Twitter!

från och med avsnitt 4 i min rxjs video course advances personal granskas — så om du är bekant med RxJS redan — Du kan hitta något användbart för dig också: högre ordning observerbara, Anti-mönster, schemaläggare, enhetstestning, etc! Ge det ett försök!

* ett särskilt tack till Lars Gyrup Brink Nielsen, Nicholas Jamieson, Tim Deschryver och Michael kar Exception för att ha granskat detta inlägg och gjort många värdefulla kommentarer för att göra det bättre!

diskutera med gemenskapen

Lämna ett svar

Din e-postadress kommer inte publiceras.