RxJS recepten:’ forkJoin ‘ met de voortgang van de voltooiing voor bulk netwerk aanvragen in Hoek

zoals het vaak gebeurt bij mij — dit bericht is slechts een verlenging van mijn StackOverflow activiteit: -).

Vraag:

is er een manier om een lijst van waarneembare objecten samen te brengen om cumulatief resultaat te krijgen zoals forkJoin, maar een soort vooruitgang te krijgen terwijl ze klaar zijn?

een mooie taak voor het maken van aangepaste RxJS-functie. Laten we het implementeren!

laten we eens kijken naar de officiële documentatie:

forkJoin (…sources: any): Observable<any>

accepteert een Array van ObservableInput of een woordenboek Object van ObservableInput en geeft een Observable terug die ofwel een array van waarden geeft in exact dezelfde volgorde als de doorgegeven array, ofwel een woordenboek van waarden in dezelfde vorm als het doorgegeven woordenboek.

met andere woorden, forkJoin voor Observables werkt op dezelfde manier als Promise.Alles werkt voor beloftes.

hier is een marmerdiagram:

de mogelijke use-case voor het draait veel parallelle netwerken verzoeken-bijvoorbeeld, het ophalen van een aantal usersList details (als API ondersteunt alleen per gebruiker fetch).

hier is een voorbeeld:

fragment-link

hier is een codepen-link om mee te spelen.
het werkt goed, maar wat als we wat tussenliggende informatie nodig hebben, zoals hoeveel verzoeken al zijn opgelost? Met de huidige forkJoin-implementatie is het onmogelijk, maar we kunnen onze eigen versie ervan maken ?.
OK, dus korte agenda hoe dit forkjoin met percentage moet werken:
Output:
1. Het retourneert hogere orde (HO) Observable () die een array van twee Observables uitzendt: .

<>kopiëren
*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. percentage$ — geeft percentage van voltooiing (aantal);
3. finalResult$ – zendt een laatste array van waarden aan het einde (of fout als een waarneembaar argument foutwaarde uitzendt).
voorlopig gebruik ziet er zo uit:

knipselkoppeling

uitvoeringsdetails:

  1. onze forkjoint withprogress functie accepteert een array van waarneembare objecten en zou een hogere-orde waarneembaar moeten retourneren.
  2. deze returned Observable should emit value (we zullen gebruik maken van () voor dat)
  3. bijwerkingen zullen worden toegevoegd aan elk item in een array van Argument Observables om het percentage van voltooiing te berekenen en emit deze waarde met speciaal percentage$ (we zullen finalize operator gebruiken voor percentage berekening en gebruik onderwerp als percentage$).
  4. finalResult$ biedt standaard RxJS forkJoin resultaat.
  5. waarneembaar resultaat moet onafhankelijk werken voor elke abonnee (wrap — functionaliteit met RxJS defer-functie om een schone run voor elke abonnee te bieden-u kunt hier meer over dit geval lezen).
  6. als een deel van het argument Observables geeft fout — het zal worden doorgegeven aan finalResult$ abonnees.

Packtpub.com en ik bereidde een hele RxJS cursus met vele andere details van hoe u uw dagelijkse Ontwikkelaar taken op te lossen met deze geweldige bibliotheek. Het kan interessant zijn voor beginners, maar bevat ook geavanceerde onderwerpen. Kijk eens!

implementatie

# 1-2 we accepteren een array van Observables en zouden hogere-orde waarneembaar met moeten retourneren .

Ok, slechts een voetafdruk van onze toekomstige functie:

fragment link

gegeven dat we arrayOfObservables (onze Ajax observables) hebben, dus laten we de gevraagde logica herhalen en toevoegen:

#3 bijwerkingen toevoegen aan argument Observables en percentage berekenen.

hier is wat we hebben:

knipselkoppeling

we zullen meer functionaliteit toevoegen aan argument observables in array. We herhalen over een array en passen finalize operator toe voor elke waarneembare.

finaliseer operator wacht tot specifieke waarneembare is voltooid, bereken dan het percentage van voltooide observables en zend waarde uit met percentage$Subject.

# 4 Laten we forkJoin bellen voor het verkrijgen van een eindresultaat waarde

snipper link

Ok, laten we door deze code gaan:
forkJoin krijgt een array van argument waarneembare, abonneert op alle van hen en wacht tot ze zijn voltooid.
zodra een resultaat klaar is-tap operator zendt laatste percentage waarde (100%) en voltooit percentage$ onderwerp (om geheugenlekken te voorkomen).
de eindresultaten zullen aan de abonnees worden doorgegeven.

5 Deze functie in ‘defer’

RxJS defer-functie omwikkelt, biedt een nieuwe waarneembare instantie (een resultaat van de callback-functie) voor elke abonnee. Dit betekent dat elk van onze abonnees krijgt clean run (en counter = 0).

knipselkoppeling

laat zien hoe het werkt:

  1. we krijgen een array van observables (line1).
  2. Wrap resultaat met RxJS uitstel om een schone run voor elke abonnee (regel 3)
  3. Create teller om het percentage van voltooiing te berekenen en instantiate procent$ afhankelijk van emit percentage value (regels 5-6).
  4. we maken een nieuwe array door te itereren over de originele array en nieuwe functionaliteit toe te voegen met finalize – berekening van de procentuele waarde en het uit te zenden als sommige observables voltooid zijn. (regels 8-15)
  5. Bel RX forkJoin en pas tap operator toe om percentage 100 te kunnen verzenden wanneer forkJoin een eindresultaat krijgt. Wijs resultaat toe aan finalResult $ variable (regels 17-22).
  6. retourneer hogere-orde waarneembaar die zal uitzenden .

wrap up

zo werkt het in een codepen:

vorkheftruck met percentage

hoe zit het met het gebruik in hoekig?Link naar deze sectie

deze functie is ook gepubliceerd als een NPM pakket-rxjs-toolbox zodat u het kunt gebruiken in uw projecten.

en hier is een Stackblitz Angular demo die dat pakket gebruikt om de procentuele waarde naar de laadbalk te voeren:

in Hoek

aanvullende aflezing.

u kunt hier meer lezen over RxJS operators use cases:

  1. “herhaal”
  2. “RxJS: Managing Operator State” door 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 — een verzameling van handige RxJS-operators om met backoffstrategieën om te gaan door Alex Okrushko.

zoals dit artikel? Laten we contact houden op Twitter!

vanaf sectie 4 van mijn RxJS videocursus advances wordt het personeel beoordeeld – dus als u RxJS al kent-kunt u ook iets nuttigs voor u vinden: hogere-orde observables, anti-patronen, schedulers, unit testing, etc! Probeer het eens!*Speciale dank aan Lars Gyrup Brink Nielsen, Nicholas Jamieson, Tim Deschryver en Michael Karén voor het lezen van deze post en het maken van vele waardevolle opmerkingen om het beter te maken!

bespreken met de gemeenschap

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.