Direct naar de hoofdinhoud
Module 7 · Les 4 van 428/32 in de cursus~12 min
Modulelessen (4/4)

Fouten in asynchrone code

Asynchrone operaties mislukken anders dan synchrone operaties: de fout komt niet onmiddellijk, het arriveert "later", wanneer de belofte de status afgewezen krijgt. Laten we eens kijken naar de twee belangrijkste hulpmiddelen.

try/catch met await

Wanneer u await vóór een belofte plaatst die mislukt, wordt de fout opnieuw ingediend als een normale uitzondering: je vangt het op met try/catch.

JS
async function safeRead() {
  try {
    const r = await fetch('/api/cose');
    if (!r.ok) throw new Error('HTTP ' + r.status);
    return await r.json();
  } catch (err) {
    console.error('network error:', err.message);
    return null;
  }
}

Het is het meest leesbare patroon: je schrijft het ‘gelukkige pad’ lineair en handelt alles in één blok af.

.catch op een belofte

In geketende stijl:

JS
fetch('/api/cose')
  .then((r) => r.json())
  .then((data) => console.log(data))
  .catch((err) => console.error(err));

.catch vangt elke fout op die in de voorgaande keten is gegenereerd.

Promise.all mislukt bij de eerste afwijzing

JS
const ps = [Promise.resolve(1), Promise.reject(new Error('no')), Promise.resolve(3)];
try {
  const r = await Promise.all(ps);
} catch (err) {
  console.log(err.message); // 'no'
}

De andere beloften blijven op de achtergrond actief, maar Promise.all "regelt" bij de eerste fout. Als je de resultaten van alle resultaten wilt zien (inclusief mislukkingen), gebruik dan Promise.allSettled:

JS
const outcomes = await Promise.allSettled(ps);
// [{ status: 'fulfilled', value: 1 },
//  { status: 'rejected', reason: Error('no') },
//  { status: 'fulfilled', value: 3 }]

Probeer het

Oefening#js.m7.l4.e1
Pogingen: 0Laden…

Definieer `readOrFallback(p, fallback)` async: probeer op de Promise p te wachten; als het wordt afgewezen, retourneert u fallback.

Editor laden…
Toon hint

probeer {retour wacht p; } catch {return fallback; }

Oplossing beschikbaar na 3 pogingen

Oefening beoordelen

Oefening#js.m7.l4.e2
Pogingen: 0Laden…

Definieer `allOrNothing(promises)` async: gebruik Promise.all. Als er ten minste één mislukt, retourneert u de lege array []. Geef anders de waarden terug.

Editor laden…
Toon hint

try { return wacht op Promise.all(beloften); } vangen { terug []; }

Oplossing beschikbaar na 3 pogingen