Angular Academy · leksjon

Transformeringsoperatorer

Bruk map, switchMap, mergeMap og concatMap.

Leksjon 1 av 413 trinn

Transformeringsoperatorer er en gratis leksjon i Angular Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Angular Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Angular Academy inneholder totalt 4 leksjoner.

Hva er operatorer

Operatorer er funksjoner som settes sammen i .pipe() for å transformere en strøm. Transformasjonsoperatorer endrer hver verdi som sendes ut, eller flater ut indre observables til resultatet.

map

map transformerer hver verdi som sendes ut, omtrent som Array.map, men over tid.

import { of, map } from 'rxjs';

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

Hvorfor mapping av høyere orden

Når hver verdi utløser en annen observable (for eksempel et HTTP-kall), får De en observable av observables. Utflatende operatorer (switchMap, mergeMap, concatMap) abonnerer på den indre observablen og sender ut verdiene fra den.

switchMap

switchMap avbryter den forrige indre observablen når en ny verdi kommer. Dette er perfekt for søk mens De skriver — gamle forespørsler forkastes.

import { switchMap } from 'rxjs';

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

mergeMap

mergeMap (alias flatMap) kjører indre observables samtidig og slår sammen alle verdiene de sender ut. Ingenting avbrytes.

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 legger indre observables i kø og kjører dem én om gangen i riktig rekkefølge, mens den venter på at hver skal fullføres. Bruk den når rekkefølgen er viktig.

import { concatMap } from 'rxjs';

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

exhaustMap

exhaustMap ignorerer nye verdier mens en indre observable fortsatt kjører. Dette er nyttig for å hindre doble innsendinger ved klikk på en knapp.

import { exhaustMap } from 'rxjs';

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

Velge riktig utflatingsoperator

switchMap: Avbryt den forrige (søk).
mergeMap: Alle parallelt (uavhengige skrivinger).
concatMap: I rekkefølge, én etter én (sekvensielle lagringer).
exhaustMap: Ignorer mens den er opptatt (påloggingsknapp).

switchMap og avbryting

Fordi switchMap avbryter indre observables som er under kjøring, avslutter den også abonnementet på den underliggende HTTP-forespørselen. Angular oversetter dette til en avbrutt forespørsel, noe som sparer båndbredde.

Kombinere map med en utflatingsoperator

De bruker ofte map for å hente ut data etter utflating.

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

Unngå nestede abonnementer

Abonner aldri inne i et abonnement. Bruk heller en utflatingsoperator — den holder pipelinen deklarativ og håndterer oppryddingen riktig.

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

Hurtigsjekk

Test forståelsen Deres av transformasjonsoperatorer.

Besvar den i den interaktive leksjonen

Oppsummering: transformasjonsoperatorer

map transformerer verdier, mens flattening-operatorer håndterer indre observabler.

switchMap: avbryter den forrige.
mergeMap: parallelt.
concatMap: sekvensielt, i rekkefølge.
exhaustMap: ignorerer mens den er opptatt.

Neste: filtreringsoperatorer.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 38
Leksjoner: 144

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Transformeringsoperatorer» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Angular Academy, inkludert «Transformeringsoperatorer», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Angular Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Transformeringsoperatorer»?

Bruk map, switchMap, mergeMap og concatMap. Du øver på Angular Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Angular Academy?

Ingen tidligere erfaring er nødvendig. Angular Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «Transformeringsoperatorer»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Angular Academy-leksjonen?

Ja. Alle Angular Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Angular Academy