RXJS recipes:’ forkJoin ‘ con l’avanzamento del completamento per le richieste di rete di massa in Angular

Come spesso mi accade — questo post è solo un prolungamento della mia attività StackOverflow:-).

Domanda:

C’è un modo per raccogliere un elenco di osservabili insieme per ottenere risultati cumulativi come forkJoin, ma ottenere una sorta di progresso mentre finiscono?

Un bel compito per la creazione di funzione personalizzata RxJS. Mettiamola in pratica!

diamo un’occhiata alla documentazione ufficiale:

forkJoin(…fonti: qualsiasi): Osservabile<qualsiasi>

Accetta un Array di ObservableInput o un dizionario Object di ObservableInput e restituisce un Observable che emette un array di valori nell’ordine esatto in quanto la matrice passata, o un dizionario di valori nella stessa forma del passato dizionario.

In altre parole, forkJoin per Observables funziona allo stesso modo di Promise.tutto funziona per le promesse.

Ecco un diagramma di marmo:

Il possibile caso d’uso è l’esecuzione di molte richieste di reti parallele, ad esempio il recupero di alcuni dettagli usersList (se l’API supporta solo il recupero per utente).

Ecco un esempio:

snippet link

Ecco un link codepen con cui giocare.
Funziona bene, ma cosa succede se abbiamo bisogno di conoscere alcune informazioni intermedie come quante richieste sono già state risolte? Con l’attuale implementazione di forkJoin, è impossibile ma possiamo crearne una nostra versione ?.
OK, così breve agenda come questo forkJoinWithPercent dovrebbe funzionare:
Uscita:
1. Restituisce Observable () di ordine superiore (HO ) che emette una matrice di due osservabili: .

<>Copia
*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. percentuale$ – emette percentuale di completamento (numero);
3. finalResult em-emette una matrice finale di valori alla fine (o errore se qualche argomento osservabile emette valore di errore).
L’utilizzo preliminare è simile a questo:

snippet link

Dettagli di implementazione:

  1. La nostra funzione forkJointWithProgress accetta un array di osservabili e dovrebbe restituire Osservabili di ordine superiore.
  2. Questo osservabile restituito dovrebbe emettere valore (useremo of () per questo)
  3. Gli effetti collaterali verranno aggiunti a ciascun elemento in una serie di argomenti osservabili per calcolare la percentuale di completamento ed emettere questo valore con percentuale speciale percent (useremo l’operatore finalize per il calcolo percentuale e useremo il Soggetto come percentuale$).
  4. finalResult provides fornisce il risultato standard di RXJS forkJoin.
  5. Risultato Osservabile dovrebbe funzionare in modo indipendente per ogni abbonato (funzionalità wrap con funzione di rinvio RxJS per fornire una corsa pulita per ogni abbonato — puoi leggere di più su questo caso qui).
  6. Se alcuni degli osservabili argomento emette errore-sarà propagato a finalResult subscribers subscribers.

Packtpub.com e ho preparato un intero corso RxJS con molti altri dettagli su come puoi risolvere i tuoi compiti di ogni giorno con questa fantastica libreria. Può essere interessante per i principianti, ma contiene anche argomenti avanzati. Date un’occhiata!

Implementazione

#1-2 Accettiamo una serie di osservabili e dovremmo restituire Osservabili di ordine superiore con .

Ok, solo un’impronta della nostra funzione futura:

snippet link

Dato che abbiamo ottenuto arrayOfObservables (i nostri osservabili ajax), quindi ripetiamo e aggiungiamo la logica richiesta:

#3 Aggiungendo effetti collaterali agli osservabili degli argomenti e calcolando la percentuale.

Ecco cosa abbiamo:

snippet link

Aggiungeremo più funzionalità agli argomenti osservabili in array. Iteriamo su un array e applichiamo l’operatore finalize per ogni osservabile.

l’operatore finalizza attende il completamento osservabile specifico, quindi calcola la percentuale di osservabili completati ed emette valore con percentuale Subject Subject.

#4 Chiamiamo forkJoin per ottenere un valore di risultato finale

snipper link

Ok, passiamo attraverso questo codice:
forkJoin ottiene una serie di argomenti osservabili, si iscrive a tutti e aspetta che siano completi.
Una volta che un risultato è pronto — toccare operatore emette ultimo valore percentuale (100%) e completa percentuale Subject Soggetto (per evitare perdite di memoria).
I risultati finali saranno emessi agli abbonati.

5 Avvolgendo tutta questa funzione in ‘defer’

La funzione RXJS defer fornisce una nuova istanza osservabile (un risultato della sua funzione di callback) per ogni abbonato. Ciò significa che ciascuno dei nostri abbonati otterrà clean run (e counter = 0).

snippet link

Consente di rivedere come funziona:

  1. Otteniamo una serie di osservabili (line1).
  2. Avvolgi il risultato con RXJS defer per fornire una corsa pulita per ogni abbonato (riga 3)
  3. Crea contatore per calcolare la percentuale di completamento e istanziare la percentuale Subject Soggetto a emettere valore percentuale (righe 5-6).
  4. Creiamo un nuovo array iterando sull’array originale e aggiungendo nuove funzionalità con il valore percentuale di finalize – calculating ed emettendolo se alcuni degli osservabili vengono completati. (linee 8-15)
  5. Chiama Rx forkJoin e applica l’operatore tap per poter inviare la percentuale 100 quando forkJoin ottiene un risultato finale. Assegna risultato a finalResult variable variabile (righe 17-22).
  6. Restituisce osservabile di ordine superiore che emetterà .

Per concludere

Ecco come funziona in un codepen:

forkJoinWithPercent

Che ne dici di usarlo in Angular?Link a questa sezione

Questa funzione è pubblicata anche come pacchetto npm — rxjs-toolbox in modo da poterla usare nei tuoi progetti.

Ed ecco una demo angolare di Stackblitz che utilizza quel pacchetto per alimentare il valore percentuale per caricare la barra:

In angolare

Lettura aggiuntiva.

Puoi leggere di più sui casi di utilizzo degli operatori RxJS qui:

  1. “Riprova vs Repeat”
  2. “RxJS: Managing Operator State” di Nicholas Jamieson.
  3. “RXJS ‘repeat’ operator — beginner negromancer guide”
  4. “Throttling notifiche da più utenti con RxJS”
  5. rxjs-toolkit — RXJS Everyday Custom Operators by Jason Awbrey.
  6. backoff-rxjs-Una raccolta di operatori RxJS utili per affrontare le strategie di backoff di Alex Okrushko.

Ti piace questo articolo? Restiamo in contatto su Twitter!

A partire dalla sezione 4 del mio RXJS video course advances lo staff è recensito-quindi se hai già familiarità con RxJS-puoi trovare qualcosa di utile anche per te: osservabili di ordine superiore, anti-pattern, scheduler, unit test, ecc! Fare un tentativo!

* Un ringraziamento speciale a Lars Gyrup Brink Nielsen, Nicholas Jamieson, Tim Deschryver e Michael Karén per aver esaminato questo post e aver fatto molte osservazioni preziose per renderlo migliore!

Discutere con la comunità

Lascia un commento

Il tuo indirizzo email non sarà pubblicato.