Promises: then catch finally Promise.all
Maak Promises aan en koppel ze, handel fouten af in catch-blokken, voer opruimwerk uit in finally en voer meerdere Promises parallel uit met Promise.all.
Promises: then catch finally Promise.all is een gratis Frontend Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Frontend Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Frontend Academy bevat in totaal 4 lessen.
Wat is een Promise?
Een Promise vertegenwoordigt een waarde die in de toekomst beschikbaar komt. Het is een object met een van drie toestanden: in afwachting (beginstadium), vervuld (opgelost met een waarde) of afgewezen (mislukt met een reden). Zodra de afhandeling is voltooid, blijft de toestand van een Promise permanent.
Een Promise maken
Maak een Promise met de constructor new Promise(executor). De uitvoerderfunctie ontvangt de terugbelfuncties resolve en reject. Roep resolve aan met de waarde bij succes of reject met een fout.
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() — Succes afhandelen
promise.then(onFulfilled) registreert een terugbelfunctie die wordt uitgevoerd wanneer de Promise wordt vervuld. De functie ontvangt de opgeloste waarde. .then() geeft een nieuwe Promise terug, zodat je ketens kunt maken.
fetch('/api/users')
.then(response => response.json())
.then(users => {
console.log('Users:', users);
return users.length;
})
.then(count => console.log('Count:', count));.catch() — Fouten afhandelen
promise.catch(onRejected) handelt afwijzingen af. Aan het einde van een keten vangt dit alle fouten op uit elke eerdere stap.
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() — Altijd uitvoeren
promise.finally(onFinally) wordt uitgevoerd ongeacht of de Promise is vervuld of afgewezen. Dit is ideaal voor opruimwerk: een laadindicator verbergen, een vergrendeling vrijgeven of analysegegevens vastleggen.
showSpinner();
fetch('/api/data')
.then(res => res.json())
.then(render)
.catch(handleError)
.finally(() => hideSpinner()); // always runsPromise-ketens — Waarden teruggeven
Geef een waarde terug uit .then(); die wordt de opgeloste waarde van de volgende .then(). Geef een nieuwe Promise terug om asynchrone bewerkingen opeenvolgend aan elkaar te koppelen.
getUser(id)
.then(user => getOrders(user.id)) // return Promise
.then(orders => orders[0]) // return value
.then(order => console.log(order)); // receive orderPromise.all() — Parallel uitvoeren
Promise.all([p1, p2, p3]) wacht totdat alle Promises zijn opgelost en geeft een array met resultaten in dezelfde volgorde terug. Als een Promise wordt afgewezen, wordt het geheel onmiddellijk afgewezen.
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() — Niet meteen mislukken
Promise.allSettled() wacht totdat alle Promises zijn afgehandeld (opgelost of afgewezen) en geeft een array met resultaatobjecten terug met {status, value} of {status, reason}. Dit is nuttig wanneer je niet wilt dat één fout alle resultaten ongeldig maakt.
const results = await Promise.allSettled([p1, p2, p3]);
results.forEach(result => {
if (result.status === 'fulfilled') use(result.value);
else logError(result.reason);
});Promise.race() en Promise.any()
Promise.race() wordt opgelost of afgewezen met de eerste Promise die is afgehandeld. Promise.any() wordt opgelost met de eerste vervulde Promise (afwijzingen worden genegeerd; de Promise wordt alleen afgewezen als alle Promises worden afgewezen). Dit is nuttig voor time-outs en redundantie.
// Timeout pattern:
const withTimeout = (promise, ms) => Promise.race([
promise,
new Promise((_, reject) => setTimeout(() => reject(new Error('Timeout')), ms))
]);Al afgehandelde Promises maken
Promise.resolve(value) maakt een Promise die al met value is vervuld. Promise.reject(error) maakt een Promise die al is afgewezen. Dit is nuttig voor testen en adapterfuncties.
const p = Promise.resolve(42);
p.then(v => console.log(v)); // 42Gebeurtenissen voor niet-afgehandelde afwijzingen
Als een Promise wordt afgewezen zonder .catch(), ontstaat een niet-afgehandelde afwijzing. Moderne browsers en Node.js geven waarschuwingen. Koppel altijd een .catch() aan de Promise of gebruik try/catch met async/await.
window.addEventListener('unhandledrejection', event => {
console.error('Unhandled rejection:', event.reason);
event.preventDefault();
});Korte controle
Welke statische methode voert meerdere Promises parallel uit en wordt opgelost met een array met alle resultaten?
Samenvatting: Promises
.then() voor succes, .catch() voor fouten en .finally() voor opruimwerk. Ketens geven waarden door. Promise.all() voert bewerkingen parallel uit. Promise.allSettled() verdraagt gedeeltelijke fouten. Promise.race() levert het snelste resultaat. Handel afwijzingen altijd af. Moderne code gebruikt async/await als syntactische verkorting voor Promises.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 41
- Lessen
- 163
Veelgestelde vragen
Is de les “Promises: then catch finally Promise.all” gratis?
Ja — de volledige tekst van “Promises: then catch finally Promise.all” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Frontend Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Frontend Academy bevat in totaal 4 lessen.
Wat leer ik in “Promises: then catch finally Promise.all”?
Maak Promises aan en koppel ze, handel fouten af in catch-blokken, voer opruimwerk uit in finally en voer meerdere Promises parallel uit met Promise.all. Je oefent met Frontend Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Frontend Academy te beginnen?
Ervaring vooraf is niet nodig. Frontend Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Promises: then catch finally Promise.all”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Frontend Academy?
Ja. Elke les over Frontend Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- De event loop: call stack queue microtasks
- Callbacks en callback hell
- Promises: then catch finally Promise.all
- async/await en foutafhandeling