RxJS switchMap, concatMap, mergeMap, ExhaustMap

Blog

RxJS switchMap, concatMap, mergeMap, ExhaustMap - Impara in modo approfondito le strategie di unione, switch, concat e scarico e i loro operatori: concatMap, mergeMap, switchMap e ExhaustMap.



Prima RxJS diventato abbastanza popolare nello sviluppo front-end, tutti noi avevamo a che fare con le richieste AJAX con Promises. Le promesse sono facili da usare e da capire, ma in alcuni scenari più complessi non bastano. In questo articolo, spiegherò come utilizzare in modo efficiente flussi osservabili di ordine superiore in quattro diversi scenari con quattro diverse strategie di appiattimento - |_+_|, |_+_| |_+_| e |_+_|.

Sommario

  • introduzione
  • osservabili di ordine superiore
  • Appiattimento delle osservabili di ordine superiore
    ConcatMapMergeMapSwitchMapExhaustMap* Riepilogo

introduzione

L'esecuzione della richiesta HTTP nel browser è per sua natura asincrona. Significa che possiamo modellarlo con RxJS Observables. In Angular, abbiamo un |_+_| servizio con metodi corrispondenti alle operazioni HTTP (get, post, put, ecc.). Questi metodi restituiscono Observables a cui possiamo iscriverci. Ma di solito si esegue l'operazione HTTP dopo accade un altro evento, ad esempio clic evento. Possiamo anche modellare tale browser clic eventi come un flusso osservabile, perché questi eventi possono apparire in qualsiasi momento in futuro, più volte. Quindi ora abbiamo due flussi che vogliamo usare in sequenza: clic l'evento dovrebbe attivare la chiamata HTTP (nell'esempio utilizzo il metodo |_+_|). L'approccio banale sarebbe quello di abbonarsi a clic eventi e all'interno della funzione di sottoscrizione iscriviti a |_+_| metodo.



mergeMap

Il codice sopra funziona, ma prima di tutto contiene abbonamenti annidati, il che ci ricorda inferno di richiamata e non sembra molto pulito. In secondo luogo, non ci consente di utilizzare strategie di appiattimento, utili quando si vuole gestire la situazione in cui un successivo clic l'evento accade prima |_+_| flusso di operazione emette il suo risultato finale. Immagina lo scenario in cui l'utente fa clic sul pulsante la seconda volta quando la richiesta HTTP non ha ancora restituito il risultato. Cosa dovrebbe succedere? Dovremmo aspettare che la prima richiesta HTTP finisca e poi iniziare la seconda? O dovremmo abbandonare la prima query HTTP ed eseguire immediatamente la seconda? O forse non consentiamo affatto le successive chiamate HTTP quando ce n'è ancora una in sospeso? Come vedi, ci sono diversi approcci per gestire questo caso complicato. Con l'utilizzo di opportune operazioni di flattening, che esamineremo nei prossimi capitoli, possiamo facilmente implementare una soluzione che sia adatta a noi.

osservabili di ordine superiore

Possiamo riscrivere il nostro primo frammento di codice nel seguente sotto. Qui, invece di iscriverti subito a clic streaming, noi |_+_| nell'invocazione di |_+_| metodo. A causa del fatto che |_+_| il metodo restituisce Observable stesso, abbiamo creato a osservabile di ordine superiore . Questo tipo di osservabili è solitamente composto da due flussi. Nel nostro caso, c'è un flusso esterno, che emette eventi di clic, e un flusso interno, che emette il risultato di |_+_| metodo.



dove posso comprare un atari?
concatMap

osservabile di ordine superiore è un Osservabile che emette eventi che sono Osservabili stessi; in altre parole, è un osservabile di osservabili.
La parte interessante del frammento di codice sopra è l'abbonamento. Dal momento che abbiamo mappato clic evento in un altro stream, anche il risultato dell'abbonamento sarà uno stream! Possiamo consumare il risultato finale della query HTTP sottoscrivendo il |_+_| all'interno della prima funzione di abbonamento, ma ci ritroveremo nuovamente con gli abbonamenti nidificati. E ora è il momento per le cose belle! RxJS viene fornito con gli operatori speciali che convertono osservabili di ordine superiore in osservabili di primo ordine, che possiamo sottoscrivere solo a quelli e ricevere l'evento dal flusso interno (non la sottoscrizione del flusso interno).

Appiattimento delle osservabili di ordine superiore

L'operazione di conversione del flusso di ordine superiore nel flusso di primo ordine è chiamata appiattimento . Quando lo facciamo appiattire il flusso non emette più i suoi flussi interni, ma gli eventi da quel flusso interno. Con RxJS l'appiattimento è molto semplice. Tutto quello che dobbiamo fare è applicare un operatore appropriato al tuo stream di ordine superiore. Il frammento di codice di seguito utilizza |_+_|operatore per appiattire il flusso. Grazie a ciò, il |_+_| nella sottoscrizione è l'evento dall'osservabile interno restituito dal |_+_| metodo.

switchMap

Per il fatto che |_+_| e |_+_| sono molto spesso usati insieme, esiste un operatore equivalente |_+_| che ci permette di ottenere esattamente lo stesso risultato. Il frammento di codice seguente presenta l'utilizzo di |_+_| operatore:

exhaustMap

|_+_| non è l'unico modo per appiattire il flusso di ordine superiore in RxJS. Nei prossimi capitoli capiremo le differenze tra |_+_|, |_+_|, |_+_| e |_+_|. Tutti questi operatori sono operatori appiattiti, ma sono applicabili in scenari molto diversi.

login email bell south

ConcatMap

Abbiamo già posto una domanda sullo scenario in cui lo stream esterno emette un evento (ovvero l'utente fa clic sul pulsante) prima il flusso esterno termina la sua esecuzione. Una delle strategie per gestire questo caso è attendere il completamento del flusso interno prima di iscriversi a quello successivo. Questo è esattamente ciò che noi |_+_| farà per noi. Dai un'occhiata alla demo registrata qui sotto.

In questo esempio, Salva viene fatto clic sul pulsante una seconda volta, durante l'esecuzione della query HTTP simulata. I numeri di conteggio rappresentano l'esecuzione di tale query. Poiché quel secondo evento di clic si è verificato prima che la query di salvataggio fosse terminata, la seconda query era in coda da eseguire in seguito. In questo modo noi concatenato esecuzione del flusso interno.

|_+_| è la prima strategia di appiattimento del flusso di ordine superiore presentata. Può essere utilizzato quando il nostro caso d'uso lo richiede sequenzialità . È importante notare che l'ordine delle query HTTP alla fine del browser potrebbe non essere lo stesso dell'ordine in cui il server le riceve. Possiamo immaginare una situazione in cui ci sono due query HTTP, diciamo query A e interrogare B e il browser invia query A prima, e interroga B subito dopo. Non vi è alcuna garanzia che il server riceverà tali query nello stesso ordine. A causa delle condizioni della rete, il server potrebbe ricevere query B prima e interrogare A dopo. Ecco perché avere una strategia adeguata sul lato del browser è così importante.

Unisci mappa

Un altro modo per gestire la situazione in cui il flusso esterno emette eventi durante l'esecuzione del flusso interno è unire le esecuzioni con |_+_| operatore. In questo caso, non ci preoccuperemmo di alcun ordine e eseguiremmo solo flussi interni simultaneamente . La demo registrata di seguito illustra questo scenario. Possiamo vedere che la seconda volta che si fa clic sul pulsante di salvataggio, la query HTTP simulata inizia subito dopo e viene eseguita simultaneamente con la prima domanda.

Il frammento di codice sorgente di seguito presenta come applicare |_+_| operatore per ottenere questo risultato.

HttpClient

SwitchMap

Abbiamo appreso due strategie per convertire flussi di ordine superiore in flussi di primo ordine. Entrambi sono applicabili in diversi casi d'uso, ma il prossimo sarà probabilmente quello che vorresti di più - |_+_|. Quando applichiamo questo tipo di appiattimento, il verificarsi dell'evento del flusso esterno (cioè il clic dell'utente) causa disiscrizione dall'esecuzione in corso del flusso interno corrente. Questa strategia è utile quando ci preoccupiamo solo dell'esecuzione più recente della query HTTP. Immagina l'implementazione della ricerca type-ahead. L'utente digita le prime lettere della query di ricerca, inizia la chiamata HTTP e digita le lettere successive della query. In questo caso, non ci interessano i risultati di eventuali richieste HTTP precedenti, quindi |_+_| è una misura perfetta. L'animazione di seguito presenta il comportamento di questo operatore di appiattimento. Puoi anche guardare il mio video su questo argomento: RxJS Tipo ricerca in anticipo con materiale angolare .

Il frammento di codice sorgente di seguito presenta come applicare |_+_| operatore.

save()

ScaricoMappa

L'ultimo operatore che andremo ad esplorare in questo articolo è |_+_|. Quando vogliamo semplicemente ignorare gli eventi nel flusso esterno, durante l'esecuzione del flusso interno, |_+_| è la scelta corretta. Quindi, quando usiamo questa strategia di mappatura, semplicemente non eseguiamo affatto la mappatura, se l'evento esterno appare prima del completamento del flusso interno. Questo potrebbe essere utile quando vogliamo ridurre al minimo il numero di chiamate HTTP in uscita dal browser. È possibile notare nell'animazione seguente che i clic successivi sul pulsante non causano alcun effetto se si fa clic prima del termine della prima query simulata.

come creare una calcolatrice nell'applicazione Windows Form c#

Il frammento di codice sorgente di seguito presenta come applicare |_+_| operatore.

save()

Riepilogo

L'utilizzo di Observables per le richieste HTTP può sembrare strano a prima vista, rispetto al semplice utilizzo di Promises. In questo articolo abbiamo appreso che ci sono situazioni in cui utilizzare Observables con adeguate strategie di appiattimento è utile, se non necessario, per ottenere il risultato desiderato ed evitare fastidiosi bug.

decifrare la codifica dell'intervista leetcode

Stackblitz dimostrazione: https://stackblitz.com/edit/rxjs-higher-order-streams

GitHub codice sorgente: https://github.com/bartosz-io/rxjs-higher-order-streams

Spero che tu abbia imparato qualcosa di nuovo e ti sarò molto grato se condividi questo articolo con i tuoi amici sui social media :) Se hai domande, non esitare a farle nella sezione commenti - risponderò a tutti loro. Stai attento!

#angular #angular-js #web-development

angular-academy.com

RxJS switchMap, concatMap, mergeMap, ExhaustMap

RxJS switchMap, concatMap, mergeMap, ExhaustMap - Impara in modo approfondito le strategie di unione, switch, concat e scarico e i loro operatori: concatMap, mergeMap, switchMap e ExhaustMap.