Hoe kunt u een fout (reject) van een belofte…

Bij het gebruik van await met een belofte, kunnen fouten (afwijzingen) op verschillende manieren worden afgehandeld:

try...catch-constructie: De meest gebruikelijke en aanbevolen manier. Hiermee kunnen fouten die tijdens de oplossing (resolve) of afwijzing (reject) van de belofte worden gegenereerd, elegant worden opgevangen.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP-fout! status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fout bij het ophalen van gegevens:', error);
    // Extra foutafhandeling of gebruikersmelding
  }
}

fetchData();

.catch()-methode na await: Minder aanbevolen, maar mogelijk. De fout wordt afgehandeld in de callback .catch(), als de belofte wordt afgewezen.

async function fetchData() {
  const response = await fetch('https://api.example.com/data')
    .catch(error => {
      console.error('Fout tijdens fetch:', error);
      // Fetch-foutafhandeling
      throw error; // Fout opnieuw doorgeven voor verdere verwerking
    });

  if (response && !response.ok) {
       console.error(`HTTP-fout! status: ${response.status}`);
       // HTTP-foutafhandeling
  }

  if (response && response.ok) {
      const data = await response.json()
          .catch(error => {
              console.error('Fout bij JSON-parsering:', error);
              // JSON-parseringsfoutafhandeling
          });
      if (data) {
          console.log(data);
      }
  }
}

fetchData();

Deze aanpak kan onoverzichtelijk worden bij het afhandelen van meerdere potentiële foutpunten.

Afhandeling met foutwaarde: Sommige bibliotheken of eigen functies kunnen een tuple [gegevens, fout] retourneren in plaats van de belofte te rejecten.

async function safelyFetchData() {
   const [data, error] = await safePromise(fetch('https://api.example.com/data'));
   if (error) {
      console.error('Algemene fout bij het ophalen van gegevens:', error);
      return null; // Of een andere waarde die op een fout wijst
   }
   // Er wordt aangenomen dat safePromise ook response.ok-fouten afhandelt
   console.log(data);
   return data;
}

// Voorbeeld van implementatie van safePromise (vereenvoudigd)
async function safePromise(promise) {
    try {
        const result = await promise;
         // Hier kan een check op result.ok worden gedaan
         if (result && result.ok !== undefined && !result.ok) {
             throw new Error(`HTTP-fout! status: ${result.status}`);
         }
        // Voor fetch, mogelijk moet result.json() worden await
        if (result && typeof result.json === 'function') {
            const jsonData = await result.json();
            return [jsonData, null];
        }
        return [result, null];
    } catch (error) {
        return [null, error];
    }
}

safelyFetchData();

Dit patroon (vaak "error-first callback" of "go-style error handling" genoemd) is handig wanneer je fouten lokaal wilt afhandelen zonder de uitvoering van de functie te onderbreken.

De meest schone en leesbare manier is het gebruik van try...catch rond de codeblok die await bevat.

Hoe kunt u een fout (reject) van een belofte behandelen bij het gebruik van await?