rxjs recepty: ‚forkJoin‘ s průběhem dokončení pro hromadné síťové požadavky v Angular

jak se mi často stává — tento příspěvek je jen prodloužením mé aktivity StackOverflow:-).

otázka:

existuje způsob, jak shromáždit seznam pozorovatelných dohromady získat kumulativní výsledek jako forkJoin dělá, ale získat nějaký pokrok, zatímco oni skončí?

pěkný úkol pro vytvoření vlastní funkce RxJS. Pojďme to implementovat!

pojďme se podívat na oficiální dokumentaci:

forkJoin (…zdroje: any): pozorovatelný<jakýkoli>

přijímá Array ObservableInput nebo slovník Object ObservableInput a vrací Observable, který vydává buď pole hodnot ve stejném pořadí jako předané pole, nebo slovník hodnot ve stejném tvaru jako předaný slovník.

jinými slovy, forkJoin pro pozorovatelné funguje stejným způsobem jako slib.vše funguje pro sliby.

zde je mramorový diagram:

možným případem použití je spuštění mnoha požadavků na paralelní sítě – například načítání některých podrobností seznamu uživatelů (pokud API podporuje pouze načtení uživatele).

zde je příklad:

snippet link

zde je codepen odkaz na hraní.
funguje to hezky, ale co když potřebujeme znát nějaké průběžné informace, jako je kolik požadavků je již vyřešeno? Se současnou implementací forkJoin to není možné, ale můžeme si vytvořit vlastní verzi ?.
OK, tak stručná agenda, jak by měl tento forkJoinWithPercent fungovat:
výstup:
1. Vrací vyšší řád (HO) pozorovatelný (), který vydává řadu dvou pozorovatelných:.

<>kopírovat
*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. procento$ – emituje procento dokončení (číslo);
3. finalResult$ – vydává konečné pole hodnot na konci (nebo chyba, pokud nějaký argument pozorovatelný emituje hodnotu chyby).
předběžné použití vypadá takto:

snippet link

detaily implementace:

  1. naše funkce forkJointWithProgress přijímá řadu pozorovatelných a měla by se vrátit pozorovatelnému vyššímu řádu.
  2. tento vrácený pozorovatelný by měl emitovat hodnotu (použijeme () pro to)
  3. vedlejší účinky budou přidány ke každé položce v řadě argumentů pozorovatelných pro výpočet procenta dokončení a emitovat tuto hodnotu se zvláštním procentem$ (použijeme finalize operátor pro procentuální výpočet a použijeme předmět jako procento$).
  4. finalResult$ poskytuje standardní RxJS forkJoin výsledek.
  5. výsledek pozorovatelný by měl fungovat nezávisle pro každého účastníka (funkce wrap s funkcí rxjs defer pro zajištění čistého běhu pro každého účastníka-více o tomto případu si můžete přečíst zde).
  6. pokud některý z argumentů Observables vydává chybu — bude rozšířen na finalResult $ subscribers.

Packtpub.com a připravil jsem celý kurz RxJS s mnoha dalšími podrobnostmi o tom, jak můžete vyřešit každodenní úkoly vývojáře s touto úžasnou knihovnou. To může být zajímavé pro začátečníky, ale také obsahuje pokročilá témata. Podívejte se!

implementace

# 1-2 přijímáme řadu pozorovatelných a měli bychom vrátit vyšší řád pozorovatelný s.

Ok, jen stopa naší budoucí funkce:

snippet link

vzhledem k tomu, že jsme dostali arrayOfObservables (naše ajax observables), tak pojďme iterovat znovu a přidat požadovanou logiku:

#3 Přidání vedlejších účinků do argumentu Observables a výpočet procenta.

zde je to, co máme:

snippet link

do argumentu observables v poli přidáme další funkce. Iterujeme přes pole a aplikujeme operátor finalize pro každý pozorovatelný.

dokončit operátor čeká, až konkrétní pozorovatelné dokončí, pak vypočítat procento dokončených pozorovatelných a emitovat hodnotu s procentem $ Subject.

#4 zavoláme forkJoin pro získání konečné hodnoty výsledku

snipper link

Ok, pojďme přes tento kód:
forkJoin dostane řadu argumentů pozorovatelných, přihlásí se ke všem z nich a čeká, až budou kompletní.
jakmile je výsledek připraven — operátor tap vydá Poslední procentuální hodnotu (100%) a dokončí procento $ Subject( aby se zabránilo úniku paměti).
konečné výsledky budou zaslány Předplatitelům.

5 zabalení všech těchto funkcí do „odložit“

funkce rxjs odložit poskytuje novou pozorovatelnou instanci (výsledek její funkce zpětného volání) pro každého účastníka. To znamená, že každý z našich odběratelů dostane čistý běh (a počítadlo = 0).

snippet link

umožňuje zkontrolovat, jak to funguje:

  1. získáme řadu pozorovatelných (line1).
  2. Wrap výsledek s rxjs odložit poskytnout čistý běh pro každého účastníka (řádek 3)
  3. vytvořit čítač pro výpočet procenta dokončení a instance procent$ podléhá emitovat procentuální hodnotu (řádky 5-6).
  4. vytvoříme nové pole iterací přes původní pole a přidáním nové funkce s finalizací-výpočtem procentuální hodnoty a emitováním, pokud některé z pozorovatelných dokončí. (řádky 8-15)
  5. zavolejte Rx forkJoin a použijte operátora tap, abyste mohli odeslat procento 100, když forkJoin získá konečný výsledek. Přiřaďte výsledek proměnné finalResult$(řádky 17-22).
  6. vrátí pozorovatelný vyšší řád, který bude emitovat .

zabalit

zde je návod, jak to funguje v codepen:

forkJoinWithPercent

a co jeho použití v Úhlové?Odkaz na tuto sekci

Tato funkce je publikována také jako balíček npm-rxjs-toolbox, takže ji můžete použít ve svých projektech.

a zde je Stackblitz Angular demo, který používá tento balíček pro krmení procentuální hodnotu načíst bar:

V Úhlové

další čtení.

můžete si přečíst více o rxjs operátory používá případy zde:

  1. „opakovat vs opakovat“
  2. „RxJS: Správa stavu operátora“ Nicholas Jamieson.
  3. „rxjs‘ repeat ‚operator-beginner necromancer guide“
  4. „škrtící oznámení od více uživatelů s RxJS“
  5. rxjs-toolkit – Rxjs každodenní vlastní operátory Jason Awbrey.
  6. backoff-rxjs-sbírka užitečných operátorů RxJS se vypořádat s backoff strategií Alex Okrushko.

Líbí se vám tento článek? Zůstaňme v kontaktu na Twitteru!

počínaje oddílem 4 mého rxjs video course advances personál je přezkoumán-takže pokud jste obeznámeni s RxJS již-můžete najít něco užitečného pro vás stejně: vyšší pořadí observables, anti-vzory, plánovače, testování jednotek, atd! Zkuste to!

* Zvláštní poděkování Lars Gyrup Brink Nielsen, Nicholas Jamieson, Tim Deschryver a Michael Karén pro přezkoumání tohoto příspěvku a dělat mnoho cenných poznámek, aby bylo lépe!

diskutujte s komunitou

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.