rețete RxJS: ‘forkJoin’ cu progresul de finalizare pentru cererile de rețea în vrac în Angular

așa cum se întâmplă adesea cu mine — acest post este doar o prelungire a activității mele StackOverflow:-).

întrebare:

există o modalitate de a aduna o listă de observabile împreună pentru a obține rezultate cumulative ca forkJoin nu, dar obține un fel de progres în timp ce se termină?

o sarcină frumos pentru crearea funcției rxjs personalizate. Să o implementăm!

să aruncăm o privire la documentația oficială:

forkJoin(…surse: orice): observabil<orice>

acceptă un Array de ObservableInput sau un dicționar Object de ObservableInput și returnează un Observable care emite fie o matrice de valori în exact aceeași ordine ca matrice trecut, sau un dicționar de valori în aceeași formă ca și dicționarul trecut.

cu alte cuvinte, forkJoin for Observables funcționează în același mod ca și promisiunea.toate funcționează pentru promisiuni.

Iată o diagramă de marmură:

posibil caz de utilizare pentru aceasta se execută mai multe cereri de rețele paralele — de exemplu, preluarea unor detalii usersList (dacă API acceptă numai pe utilizator fetch).

Iată un exemplu:

link fragment

aici este un link codepen să se joace cu.
funcționează frumos, dar dacă trebuie să cunoaștem câteva informații intermediare, cum ar fi câte cereri sunt rezolvate deja? Cu punerea în aplicare actuală forkJoin, este imposibil, dar putem crea propria noastră versiune a acesteia ?.
OK, deci scurt agenda cum acest forkJoinWithPercent ar trebui să funcționeze:
ieșire:
1. Se întoarce de ordin superior(HO) observabil ( ) care emite o serie de două observabile: .

<>copiază
*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$ – emite procent de finalizare (număr);
3. finalResult$ – emite o matrice finală de valori la sfârșit (sau eroare dacă un argument observabil emite o valoare de eroare).
utilizarea preliminară arată astfel:

fragment link

detalii implementare:

  1. funcția noastră forkJointWithProgress acceptă o serie de observabile și ar trebui să returneze observabile de ordin superior.
  2. acest lucru a revenit observabil ar trebui să emită valoare (vom folosi De() pentru că)
  3. efecte secundare vor fi adăugate la fiecare element într-o serie de observabile argument pentru a calcula procentul de finalizare și emit această valoare cu procente speciale$ (vom folosi operatorul de finalizare pentru calculul procentual și de a folosi subiect ca la sută$).
  4. finalResult$ oferă rezultatul standard rxjs forkJoin.
  5. rezultatul observabil ar trebui să funcționeze independent pentru fiecare abonat (funcționalitatea wrap cu funcția de amânare RxJS pentru a oferi o rulare curată pentru fiecare abonat — puteți citi mai multe despre acest caz aici).
  6. dacă unele dintre observabile argument emite eroare — acesta va fi propagat la finalresult$ abonați.

Packtpub.com și am pregătit un întreg curs RxJS cu multe alte detalii despre modul în care vă puteți rezolva sarcinile zilnice ale dezvoltatorului cu această bibliotecă uimitoare. Poate fi interesant pentru începători, dar conține și subiecte avansate. Uită-te!

implementare

#1-2 acceptăm o serie de observabile și ar trebui să returnăm observabile de ordin superior cu .

Ok, doar o amprentă a funcției noastre viitoare:

fragment link

având în vedere avem arrayOfObservables (observables noastre ajax), așa că haideți să itera peste și se adaugă logica solicitat:

#3 Adăugarea de efecte secundare la observabile argument și calcularea procent.

Iată ce avem:

fragment link

vom adăuga mai multe funcționalități la observabile argument în matrice. Iterăm peste o matrice și aplicăm operatorul de finalizare pentru fiecare observabil.

finalizarea operatorului așteaptă până la finalizarea observabilă specifică, apoi calculați procentul observabilelor finalizate și emiteți valoarea cu subiectul procentual$.

#4 să apel forkJoin pentru a obține o valoare rezultat final

snipper link

Ok, să trecem prin acest cod:
forkJoin devine o serie de observabile argument, subscrie la toate acestea și așteaptă până când acestea sunt complete.
odată ce un rezultat este gata — operatorul tap emite ultima valoare procentuală (100%) și completează procentul$ subiect (pentru a preveni scurgerile de memorie).
rezultatele finale vor fi emise abonaților.

5 împachetarea acestei funcții în ‘amânare’

funcția rxjs amânare oferă o nouă instanță observabilă (un rezultat al funcției sale de apel invers) pentru fiecare abonat. Acest lucru înseamnă că fiecare dintre abonații noștri vor primi alerga curat (și counter = 0).

fragment link

vă permite să examinați cum funcționează:

  1. obținem o serie de observabile (line1).
  2. Wrap rezultat cu rxjs amâna pentru a oferi o centrare curată pentru fiecare abonat (linia 3)
  3. crearea counter pentru a calcula procentul de finalizare și instantia la sută$ sub rezerva emit valoare procentuală (liniile 5-6).
  4. creăm o nouă matrice prin iterarea peste matricea originală și adăugarea de noi funcționalități cu valoarea procentuală de calculare a finalizării și emiterea acesteia dacă unele dintre observabile se finalizează. (linii 8-15)
  5. apelați RX forkJoin și aplicați operatorul tap pentru a putea trimite procentul 100 atunci când forkJoin obține un rezultat final. Atribuirea rezultat finalResult $ variabilă (linii 17-22).
  6. returnează ordinul superior observabil care va emite .

pentru a încheia

Iată cum funcționează într-un codepen:

forkJoinWithPercent

Ce zici de utilizarea în Angular?Link la această secțiune

această funcție este publicat ca un pachet npm, precum și — rxjs-toolbox astfel încât să puteți folosi în proiectele dumneavoastră.

și aici este un demo unghiular Stackblitz care utilizează acest pachet pentru a alimenta valoarea procentuală pentru a încărca bara:

în unghiular

lectură suplimentară.

puteți citi mai multe despre operatorii rxjs utilizează cazuri aici:

  1. „reîncercați vs repetați”
  2. „RxJS: gestionarea statului Operator” de Nicholas Jamieson.
  3. „rxjs”repeat”operator — începător necromancer guide”
  4. „notificări de la mai mulți utilizatori cu Rxjs”
  5. Rxjs-toolkit — Rxjs operatorii personalizate de zi cu zi de Jason Awbrey.
  6. backoff-rxjs — o colecție de operatori rxjs utile pentru a face față cu strategii backoff de Alex Okrushko.

ca acest articol? Să păstrăm legătura pe Twitter!

pornind de la Secțiunea 4 a cursului meu video rxjs avansează personalul este revizuit — deci, dacă sunteți deja familiarizat cu RxJS-puteți găsi ceva util și pentru dvs.: observabile de ordin superior, anti-modele, programatoare, testare unitară etc! Dă-o încercare!

* Mulțumiri speciale lui Lars Gyrup Brink Nielsen, Nicholas Jamieson, Tim Deschryver și Michael Kar pentru că au revizuit acest post și au făcut multe observații valoroase pentru a-l îmbunătăți!

discutați cu comunitatea

Lasă un răspuns

Adresa ta de email nu va fi publicată.