Angular Academy · Lezione

Operatori di trasformazione

Utilizzi map, switchMap, mergeMap e concatMap.

Operatori di trasformazione è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.

Che cosa sono gli operatori

Gli operatori sono funzioni che si compongono all'interno di .pipe() per trasformare un flusso. Gli operatori di trasformazione modificano ogni valore emesso oppure appiattiscono gli observable interni nell'output.

map

map trasforma ogni valore emesso, come Array.map ma nel tempo.

import { of, map } from 'rxjs';

of(1, 2, 3).pipe(
  map(n => n * 10)
).subscribe(v => console.log(v)); // 10, 20, 30

Perché utilizzare il mapping higher-order

Quando ogni valore attiva un altro observable, ad esempio una chiamata HTTP, si ottiene un observable di observable. Gli operatori di appiattimento (switchMap, mergeMap, concatMap) si sottoscrivono a quello interno ed emettono i suoi valori.

switchMap

switchMap annulla l'observable interno precedente quando arriva un nuovo valore. È perfetto per la ricerca durante la digitazione: le richieste precedenti vengono scartate.

import { switchMap } from 'rxjs';

searchTerm$.pipe(
  switchMap(term => this.http.get('/api/search?q=' + term))
).subscribe(results => console.log(results));

mergeMap

mergeMap (alias flatMap) esegue gli observable interni in parallelo e unisce tutte le loro emissioni. Non viene annullato nulla.

import { mergeMap } from 'rxjs';

ids$.pipe(
  mergeMap(id => this.http.get('/api/item/' + id))
).subscribe(item => console.log(item));
// all requests run in parallel

concatMap

concatMap mette in coda gli observable interni e li esegue uno alla volta, nell'ordine, attendendo il completamento di ciascuno. Lo si utilizzi quando l'ordine è importante.

import { concatMap } from 'rxjs';

saveQueue$.pipe(
  concatMap(payload => this.http.post('/api/save', payload))
).subscribe();
// requests run sequentially, in order

exhaustMap

exhaustMap ignora i nuovi valori mentre un observable interno è ancora in esecuzione. È ideale per impedire doppi invii al clic di un pulsante.

import { exhaustMap } from 'rxjs';

submitClicks$.pipe(
  exhaustMap(() => this.http.post('/api/login', creds))
).subscribe();
// extra clicks ignored until request finishes

Scegliere l'operatore di appiattimento corretto

switchMap: annulla il precedente (ricerca).
mergeMap: tutti in parallelo (scritture indipendenti).
concatMap: ordinati, uno alla volta (salvataggi sequenziali).
exhaustMap: ignora mentre è occupato (pulsante di accesso).

switchMap e annullamento

Poiché switchMap annulla gli observable interni in corso, annulla anche la sottoscrizione alla richiesta HTTP sottostante; Angular la traduce in una richiesta interrotta, risparmiando larghezza di banda.

Combinare map con un operatore di appiattimento

Spesso si utilizza map per estrarre i dati dopo l'appiattimento.

searchTerm$.pipe(
  switchMap(term => this.http.get('/api/search?q=' + term)),
  map(res => res.items)
).subscribe(items => console.log(items));

Evitare subscribe annidate

Non esegua mai una subscribe all'interno di un'altra subscribe. Utilizzi invece un operatore di appiattimento: mantiene la pipeline dichiarativa e gestisce correttamente la pulizia.

// BAD:
// outer$.subscribe(v => inner$(v).subscribe(...));
// GOOD:
// outer$.pipe(switchMap(v => inner$(v))).subscribe(...);

Verifica rapida

Verifichi la Sua comprensione degli operatori di trasformazione.

Riepilogo: operatori di trasformazione

map trasforma i valori; gli operatori di appiattimento gestiscono gli observable interni.

switchMap: annulla quello precedente.
mergeMap: in parallelo.
concatMap: in sequenza e mantenendo l'ordine.
exhaustMap: ignora i valori mentre è occupato.

Prossimo argomento: operatori di filtraggio.

Domande Frequenti

La lezione «Operatori di trasformazione» è gratuita?

Sì — il testo completo di «Operatori di trasformazione» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.

Cosa imparerò in «Operatori di trasformazione»?

Utilizzi map, switchMap, mergeMap e concatMap. Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Angular Academy?

Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Operatori di trasformazione»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Angular Academy?

Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Angular Academy