Promises: then catch finally Promise.all
Opret og kæd Promises sammen, håndtér fejl i catch-blokke, udfør oprydning i finally, og kør flere Promises parallelt med Promise.all.
Promises: then catch finally Promise.all er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad er en Promise?
En Promise repræsenterer en værdi, der bliver tilgængelig i fremtiden. Det er et objekt med en af tre tilstande: afventende (oprindelig), opfyldt (afgjort med en værdi) eller afvist (mislykkedes med en årsag). Når en Promise først er afgjort, er dens tilstand permanent.
Oprettelse af en Promise
Opret en Promise med konstruktøren new Promise(executor). Executor-funktionen modtager callbackene resolve og reject. Kald resolve med succesværdien eller reject med en fejl.
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åndtering af succes
promise.then(onFulfilled) registrerer en callback, der kører, når Promisen opfyldes. Den modtager den løste værdi. .then() returnerer en ny Promise, så du kan kæde Promises.
fetch('/api/users')
.then(response => response.json())
.then(users => {
console.log('Users:', users);
return users.length;
})
.then(count => console.log('Count:', count));.catch() — Håndtering af fejl
promise.catch(onRejected) håndterer afvisninger. Hvis den placeres i slutningen af en kæde, opfanger den enhver fejl fra ethvert tidligere trin.
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() — Kør altid
promise.finally(onFinally) kører, uanset om Promisen blev opfyldt eller afvist. Den er perfekt til oprydning: skjule en indlæsningsindikator, frigive en lås eller logge analysehændelser.
showSpinner();
fetch('/api/data')
.then(res => res.json())
.then(render)
.catch(handleError)
.finally(() => hideSpinner()); // always runsPromise-kæder — returnering af værdier
Returnér en værdi fra .then(), så bliver den den løste værdi for den næste .then(). Returnér en ny Promise for at kæde asynkrone handlinger sekventielt.
getUser(id)
.then(user => getOrders(user.id)) // return Promise
.then(orders => orders[0]) // return value
.then(order => console.log(order)); // receive orderPromise.all() — Kør parallelt
Promise.all([p1, p2, p3]) venter på, at alle Promises bliver opfyldt, og returnerer et array med resultaterne i samme rækkefølge. Hvis en Promise afvises, afvises hele resultatet straks.
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 sequentialPromise.allSettled() — Undgå hurtig afbrydelse
Promise.allSettled() venter på, at alle Promises bliver afgjort (opfyldt eller afvist), og returnerer et array med resultatobjekter, der indeholder {status, value} eller {status, reason}. Det er nyttigt, når du ikke vil have, at én fejl får alle resultater til at gå tabt.
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() bliver opfyldt eller afvist med den første afgjorte Promise. Promise.any() bliver opfyldt med den første opfyldte Promise (ignorerer afvisninger og afvises kun, hvis alle afvises). Det er nyttigt til tidsudløb og redundans.
// Timeout pattern:
const withTimeout = (promise, ms) => Promise.race([
promise,
new Promise((_, reject) => setTimeout(() => reject(new Error('Timeout')), ms))
]);Oprettelse af allerede afgjorte Promises
Promise.resolve(value) opretter en Promise, der allerede er opfyldt med den angivne værdi. Promise.reject(error) opretter en Promise, der allerede er afvist. Det er nyttigt til afprøvning og adapterfunktioner.
const p = Promise.resolve(42);
p.then(v => console.log(v)); // 42Hændelser ved uhåndterede afvisninger
Hvis en Promise afvises uden .catch(), bliver den til en uhåndteret afvisning. Moderne browsere og Node.js udsender advarsler. Tilknyt altid en .catch(), eller brug try/catch med async/await.
window.addEventListener('unhandledrejection', event => {
console.error('Unhandled rejection:', event.reason);
event.preventDefault();
});Hurtigt tjek
Hvilken statisk metode kører flere Promises parallelt og bliver opfyldt med et array med alle resultaterne?
Opsummering: Promises
.then() bruges til succes, .catch() til fejl og .finally() til oprydning. Kæder fører værdier videre. Promise.all() kører handlinger parallelt. Promise.allSettled() tåler delvise fejl. Promise.race() bruges til det hurtigste resultat. Håndter altid afvisninger. Moderne kode bruger async/await som syntaktisk sukker oven på Promises.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 41
- Lektioner
- 163
Ofte stillede spørgsmål
Er lektionen “Promises: then catch finally Promise.all” gratis?
Ja — hele teksten til “Promises: then catch finally Promise.all” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Promises: then catch finally Promise.all”?
Opret og kæd Promises sammen, håndtér fejl i catch-blokke, udfør oprydning i finally, og kør flere Promises parallelt med Promise.all. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Frontend Academy?
Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Promises: then catch finally Promise.all”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Frontend Academy-lektion?
Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Event loop: call stack, queue og microtasks
- Callbacks og callback hell
- Promises: then catch finally Promise.all
- async/await og fejlhåndtering