Frontend Academy · leksjon

Promises: then, catch, finally og Promise.all

Opprett og kjed sammen Promises, håndter feil i catch-blokker, kjør opprydding i finally, og kjør flere Promises parallelt med Promise.all.

Leksjon 3 av 413 trinn

Promises: then, catch, finally og Promise.all er en gratis leksjon i Frontend Academy på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Frontend Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva er en Promise?

En Promise representerer en verdi som blir tilgjengelig senere. Den er et objekt i én av tre tilstander: ventende (opprinnelig), oppfylt (løst med en verdi) eller avvist (mislyktes med en årsak). Når en Promise først er avgjort, er tilstanden permanent.

Opprette en Promise

Opprett en Promise med konstruktøren new Promise(executor). Executor-funksjonen mottar callbackene resolve og reject. Kall resolve med verdien ved suksess, eller reject med en feil.

const delay = (ms) => new Promise((resolve) => {
  setTimeout(resolve, ms);
});

const fetchData = (url) => new Promise((resolve, reject) => {
  fetch(url)
    .then(res => res.json())
    .then(resolve)
    .catch(reject);
});

.then() – håndtere suksess

promise.then(onFulfilled) registrerer en callback som kjøres når Promise-en oppfylles. Den mottar den løste verdien. .then() returnerer en ny Promise, slik at kjeding blir mulig.

fetch('/api/users')
  .then(response => response.json())
  .then(users => {
    console.log('Users:', users);
    return users.length;
  })
  .then(count => console.log('Count:', count));

.catch() – håndtere feil

promise.catch(onRejected) håndterer avvisninger. Når den plasseres på slutten av en kjede, fanger den opp alle feil fra trinnene over.

fetch('/api/data')
  .then(res => {
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return res.json();
  })
  .then(data => processData(data))
  .catch(err => {
    console.error('Failed:', err.message);
    showErrorToUser();
  });

.finally() – alltid kjøres

promise.finally(onFinally) kjøres uansett om Promise-en ble oppfylt eller avvist. Den passer perfekt til opprydding: skjule en innlastingsindikator, frigjøre en lås eller logge analyseinformasjon.

showSpinner();
fetch('/api/data')
  .then(res => res.json())
  .then(render)
  .catch(handleError)
  .finally(() => hideSpinner()); // always runs

Promise-kjeding – returnere verdier

Returner en verdi fra .then(), så blir den den løste verdien i neste .then(). Returner en ny Promise for å kjede asynkrone operasjoner sekvensielt.

getUser(id)
  .then(user => getOrders(user.id))  // return Promise
  .then(orders => orders[0])          // return value
  .then(order => console.log(order)); // receive order

Promise.all() – kjøre parallelt

Promise.all([p1, p2, p3]) venter på at alle Promises skal løses, og returnerer en array med resultater i samme rekkefølge. Hvis en av Promisene avvises, avvises alt umiddelbart.

const [user, posts, comments] = await Promise.all([
  fetch('/api/user/1').then(r => r.json()),
  fetch('/api/posts').then(r => r.json()),
  fetch('/api/comments').then(r => r.json()),
]);
// All three run in parallel — much faster than sequential

Promise.allSettled() – ikke mislykkes raskt

Promise.allSettled() venter på at alle Promises skal avgjøres (løses eller avvises), og returnerer en array med resultatobjekter som inneholder {status, value} eller {status, reason}. Dette er nyttig når én feil ikke skal føre til at alle resultatene forkastes.

const results = await Promise.allSettled([p1, p2, p3]);
results.forEach(result => {
  if (result.status === 'fulfilled') use(result.value);
  else logError(result.reason);
});

Promise.race() og Promise.any()

Promise.race() løses eller avvises med den første Promise-en som avgjøres. Promise.any() løses med den første Promise-en som oppfylles (ignorerer avvisninger og avvises bare hvis alle avvises). Dette er nyttig for tidsavbrudd og redundans.

// Timeout pattern:
const withTimeout = (promise, ms) => Promise.race([
  promise,
  new Promise((_, reject) => setTimeout(() => reject(new Error('Timeout')), ms))
]);

Opprette allerede avgjorte Promises

Promise.resolve(value) oppretter en Promise som allerede er oppfylt med value. Promise.reject(error) oppretter en Promise som allerede er avvist. Dette er nyttig ved testing og i adapterfunksjoner.

const p = Promise.resolve(42);
p.then(v => console.log(v)); // 42

Hendelser for ubehandlede avvisninger

Hvis en Promise avvises uten .catch(), blir den en ubehandlet avvisning. Moderne nettlesere og Node.js genererer advarsler. Legg alltid til en .catch(), eller bruk try/catch med async/await.

window.addEventListener('unhandledrejection', event => {
  console.error('Unhandled rejection:', event.reason);
  event.preventDefault();
});

Kort sjekk

Hvilken statisk metode kjører flere Promises parallelt og løses med en array som inneholder alle resultatene?

Besvar den i den interaktive leksjonen

Oppsummering: Promises

.then() brukes ved suksess, .catch() ved feil og .finally() til opprydding. Kjeder sender verdier videre. Promise.all() parallelliserer. Promise.allSettled() tåler delvise feil. Promise.race() brukes for det raskeste resultatet. Håndter alltid avvisninger. Moderne kode bruker async/await som syntaktisk sukker oppå Promises.

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: 41
Leksjoner: 163

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Promises: then, catch, finally og Promise.all» gratis?

Ja – hele teksten i «Promises: then, catch, finally og Promise.all» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Frontend Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Frontend Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Promises: then, catch, finally og Promise.all»?

Opprett og kjed sammen Promises, håndter feil i catch-blokker, kjør opprydding i finally, og kjør flere Promises parallelt med Promise.all. Du øver på Frontend 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 Frontend Academy?

Ingen tidligere erfaring er nødvendig. Frontend 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 3 av 4.

Hvor lang tid tar leksjonen «Promises: then, catch, finally og Promise.all»?

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 Frontend Academy-leksjonen?

Ja. Alle Frontend 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

Event loop: call stack, kø og mikrotasks
Callbacks og callback hell
Promises: then, catch, finally og Promise.all
async/await og feilhåndtering

← Tilbake til Frontend Academy