Loading- und Error-States behandeln
Fügen Sie Ihrer Komponente Variablen für Loading- und Error-States hinzu, zeigen Sie während des Abrufs einen Spinner an und geben Sie bei einem Fehler eine verständliche Fehlermeldung aus.
Loading- und Error-States behandeln ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Die drei Zustände asynchroner Daten
Jeder asynchrone Datenvorgang hat drei Zustände: loading (Anfrage läuft), success (Daten empfangen), error (Anfrage fehlgeschlagen). Ihre Benutzeroberfläche sollte alle drei ausdrücklich behandeln.
Ladezustands-UI
Zeigen Sie während des Ladens einen Spinner, ein Skeleton oder einen Platzhalter an. Verhindern Sie das erneute Absenden von Formularen, indem Sie Buttons während des Ladens deaktivieren. Die Benutzer sollten immer wissen, dass die Anwendung arbeitet.
if (loading) {
return (
<div className="loading-state">
<Spinner size="lg" />
<p>Loading users...</p>
</div>
);
}Fehler-UI
Zeigen Sie bei einer fehlgeschlagenen Anfrage eine verständliche Fehlermeldung an. Bieten Sie eine Aktion zum erneuten Versuch an, damit Benutzer nicht feststecken. Protokollieren Sie den vollständigen Fehler für die Entwickler.
if (error) {
return (
<div className="error-state">
<p>Failed to load data: {error}</p>
<button onClick={() => setRetry(n => n + 1)}>Try Again</button>
</div>
);
}Mechanismus zum erneuten Versuch
Erhöhen Sie einen Retry-Zähler im State und fügen Sie ihn zum Dependency-Array des Effects hinzu. Wenn Benutzer auf „Erneut versuchen“ klicken, ändert sich der Zähler und löst den Effect erneut aus.
const [retry, setRetry] = useState(0);
useEffect(() => {
// fetch...
}, [userId, retry]); // retry in deps triggers re-fetch
<button onClick={() => setRetry(n => n + 1)}>Retry</button>Best Practices für den Ladezustand
1) Zeigen Sie den Ladezustand sofort bei der Anfrage an. 2) Halten Sie den Ladezustand minimal – setzen Sie ihn nicht erneut, wenn gecachte Daten verfügbar sind. 3) Unterscheiden Sie bei Pagination zwischen dem initialen Laden und dem Nachladen. 4) Lassen Sie einen Spinner niemals für weniger als 100 ms aufblitzen – fügen Sie eine Verzögerung hinzu oder lassen Sie die bisherigen Daten sichtbar.
Optimistische Updates
Bei optimistischen Updates aktualisieren Sie die Benutzeroberfläche sofort, bevor der Server dies bestätigt, und setzen die Änderung bei einem Fehlschlag der Anfrage zurück. Dadurch entsteht der Eindruck einer sofortigen Reaktion.
// Optimistic:
const prevItems = items;
setItems(items.filter(i => i.id !== id)); // immediate UI update
try {
await deleteItem(id);
} catch (err) {
setItems(prevItems); // revert on failure
showError('Delete failed. Changes reverted.');
}Error Boundaries für Renderfehler
Verwenden Sie Error Boundaries (Klassenkomponenten mit componentDidCatch), um während des Renderns ausgelöste Fehler abzufangen. Sie zeigen eine Fallback-UI an, statt die gesamte Anwendung abstürzen zu lassen.
HTTP-Fehlerzuordnung
Ordnen Sie HTTP-Statuscodes verständlichen Meldungen für Benutzer zu. 401 → zur Anmeldung weiterleiten. 403 → „Zugriff verweigert“ anzeigen. 404 → „Nicht gefunden“. 429 → „Zu viele Anfragen – bitte warten“. 500+ → „Serverfehler – versuchen Sie es erneut“.
function mapStatusToMessage(status: number): string {
if (status === 401) return 'Please sign in to continue';
if (status === 403) return 'You don\'t have permission to do this';
if (status === 404) return 'This item no longer exists';
if (status === 429) return 'Too many requests. Please wait a moment';
if (status >= 500) return 'Server error. We\'re looking into it';
return 'Something went wrong';
}useReducer für komplexen Fetch-State
Wenn Ladezustand, Fehler und Daten miteinander interagieren, etwa beim Löschen eines Fehlers während des erneuten Ladens, ist ein Reducer übersichtlicher als mehrere useState-Aufrufe.
type FetchState<T> =
| { status: 'idle' }
| { status: 'loading' }
| { status: 'success'; data: T }
| { status: 'error'; message: string };
const [state, dispatch] = useReducer(fetchReducer, { status: 'idle' });Suspense – die Zukunft
React Suspense ermöglicht es Komponenten in Verbindung mit Frameworks zum Abrufen von Daten (React Query, Relay, Next.js), beim Warten auf Daten zu „suspendieren“. Eine übergeordnete Suspense Boundary zeigt automatisch eine Fallback-UI an. In diese Richtung entwickelt sich React weiter.
Netzwerkfehler vs. Serverfehler
Netzwerkfehler (keine Verbindung, CORS) lösen im catch-Block eine Exception aus. Serverfehler (4xx, 5xx) werden normal aufgelöst – Sie müssen res.ok prüfen, um sie zu erkennen. Ihre Fehlerbehandlung muss beide Kategorien abdecken.
Kurztest
Was ist ein „optimistisches Update“?
Zusammenfassung: Lade- und Fehlerzustände
Behandeln Sie immer Lade-, Erfolgs- und Fehlerzustände. Zeigen Sie eine aussagekräftige Lade-UI an. Ordnen Sie HTTP-Fehler verständlichen Meldungen für Benutzer zu. Implementieren Sie Mechanismen zum erneuten Versuch. Verwenden Sie optimistische Updates für sofortiges, wahrgenommenes Feedback. Nutzen Sie useReducer für einen koordinierten Fetch-State. Suspense wird dieses Muster in Zukunft weiter vereinfachen.
Häufig gestellte Fragen
Ist die Lektion „Loading- und Error-States behandeln“ kostenlos?
Ja — der vollständige Text von „Loading- und Error-States behandeln“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Loading- und Error-States behandeln“?
Fügen Sie Ihrer Komponente Variablen für Loading- und Error-States hinzu, zeigen Sie während des Abrufs einen Spinner an und geben Sie bei einem Fehler eine verständliche Fehlermeldung aus. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Frontend Academy zu starten?
Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Loading- und Error-States behandeln“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?
Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- useEffect-Grundlagen: Abhängigkeiten und Bereinigung
- Daten beim Mounten abrufen
- Loading- und Error-States behandeln
- AbortController zur Bereinigung