RxJS è la libreria Javascript che consente di sviluppare utilizzando una metodologia chiamata Reactive Programming, la quale utilizza gli Observable per la gestione di codice asincrono e callback. L'operazione che da il via a una pipeline creata a partire da un Observable è l'operazione subscribe, la quale crea una sottoscrizione allo stream e ne riceve i risultati.
L'operazione di interazione più conosciuta è la map. Supponendo di avere un Observable che emetta una sequenza di numeri, possiamo modificarne il risultato con la seguente scrittura.
// 1,2,3,4 myObs$.pipe( map(x=>x*2) ) .subscribe(x=>console.log(x)); // 2,4,6,8
L'operatore map funziona correttamente se l'operazione al suo interno è asincrona. Nel caso di un'operazione asincrona, abbiamo bisogno di utilizzare un altro metodo che riesca a gestire la Subscription generata dalla sottoscrizione al secondo Observable. Il codice di seguito è fortemente sconsigliato, in quanto all'interno dello stream, a ogni emissione si va creare una subscription non gestita.
myObs$.pipe( tap(x=>{ otherOps(x).subscribe(x=>console.log(x)); }) ) .subscribe(); // oppure myObs$.pipe( map(x=>otherOps(x)) ) .subscribe(r => r.subscribe(x=>console.log(x)));
Per poter gestire il flusso di Observable in modo corretto e più pulito, RxJS ci mette a disposizione tre diversi operatori:
- mergeMap: consente la sottoscrizione automatica alla seconda Observable, prendendosi carico della gestione della sua subscription. Non garantisce l'ordine di emissione, se la subscription ha casi in cui la computazione richieda più tempo. Caso d'uso: inserimento articoli in un carrello - ogni sottoscrizione deve completarsi.
myObs$.pipe( mergeMap(x=> otherOps(x) ) ) .subscribe(x=>console.log(x));
- switchMap: comportamento simile alla MergeMap, ma all'arrivo di un nuovo dato dalla prima Observable, la sottoscrizione alla seconda viene cancellata e risottoscritta. Caso d'uso: gestione azioni utente - quando l'utente esegue più volte un'azione, e a ogni ripetizione il flusso corrente deve essere bloccato e re-iniziare.
myObs$.pipe( switchMap(x=> otherOps(x) ) ) .subscribe(x=>console.log(x));
- concatMap: diversamente dalla switchMap, prima di risottoscriversi alla seconda subscription attende il completamento del flusso precedente. Contrariamente alla MergeMap, garantisce l'uniformità tra ordine di ingresso e ordine di emissione. Caso d'uso: conversione di numeri - ogni sequenza deve completarsi e al termine voglio poter analizzare l'output sulla base dell'input
myObs$.pipe( concatMap(x=> otherOps(x) ) ) .subscribe(x=>console.log(x));
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare i Workspace con NPM 7
Ottimizzare costi e prestazioni con l'autoscale di Azure Cosmos DB
Utilizzare la deconstruction in combinazione con l'operatore rest di Javascript
Single Page Application con .NET 5
Introduzione a GitHub
Disabilitare un pulsante in Blazor durante il salvataggio
Aggiornare la query string inserendo dei parametri in ReactJS
Autenticazione condizionale a due fattori con Azure Active Directory B2C
Utilizzare il metodo TrackGraph per impostare lo stato degli oggetti in un grafo in Entity Framework Core
Creare una direttiva per assegnare gli stili a un controllo in Angular
A quick tour around Azure Dev Spaces
Riconoscimento dei contenuti delle immagini con Azure Logic Apps e Content Moderator
I più letti di oggi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Creare un record in C#
- Winget: un nuovo package manager per Windows
- il 18/02 c'è il #container & #devops day! https://aspit.co/ContainerDevOpsDay-21 Le iscrizioni sono sempre aperte e la Call For Paper è attiva fino al 28/01! #aspilive #cfp
- Attesa e validazione manuale nelle pipeline YAML di Azure DevOps
- Utilizzare il CSS Grid Model per creare il layout di un sito
- Montare una file share con Azure Container Instance
- Container & DevOps Day - Online