Snippet

Behandlung asynchroner Aktionsfehler mittels Try-Catch

Die Fehlerbehandlung bei asynchronen Operationen hält React-Anwendungen stabil. Das Einschließen eines await-Aufrufs in einen try-catch-Block fängt Ausnahmen ab und speichert Fehlermeldungen zur Anzeige im Komponenten-State.

snippet.js

javascript

import { useState } from 'react';
 
export function SaveForm() {
  const [errorMessage, setErrorMessage] = useState(null);
 
  const handleSave = async () => {
    try {
      setErrorMessage(null);
      await Promise.reject(new Error('Network request failed'));
    } catch (err) {
      setErrorMessage(err.message);
    }
  };
 
  return (
    <div>
      <button onClick={handleSave}>Save</button>
      {errorMessage && <p role="alert">{errorMessage}</p>}
    </div>
  );
}

react

Erklärung

try { setErrorMessage(null); ... }

Setzt bestehende Fehlermeldungen zurück, bevor die asynchrone Operation gestartet wird.

catch (err) { setErrorMessage(err.message); }

Fängt aufgetretene Ausnahmen ab und speichert deren Nachricht im State, um den Benutzer zu informieren.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Behandlung asynchroner Aktionsfehler mittels Try-Catch

Verwandt