javascript / beginner
Snippet
Behandeln von Komponentenanfragefehlern mit Catch und Fehlerzustand
Saubere Fehlerbehandlung fängt fehlgeschlagene Netzwerkanfragen und Ausnahmen mit catch-Blöcken ab und speichert die Fehlermeldung im State, um dem Benutzer eine verständliche Rückmeldung zu zeigen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { useState, useEffect } from 'react';function DataViewer() {const [error, setError] = useState(null);useEffect(() => {fetch('https://api.example.com/invalid').then((res) => {if (!res.ok) throw new Error('Network response was not ok');return res.json();}).catch((err) => {setError(err.message);});}, []);if (error) return <div role="alert">Error: {error}</div>;return <div>Content loaded</div>;}
react
Erklärung
1
if (!res.ok) throw new Error('Network response was not ok');
Löst manuell einen Fehler aus, wenn der HTTP-Statuscode fehlschlägt.
2
.catch((err) => { setError(err.message); });
Fängt Netzwerk- oder Parsing-Fehler ab und aktualisiert den Fehlerzustand.
3
if (error) return <div role="alert">Error: {error}</div>;
Rendert eine barrierefreie Fallback-Warnung, sobald ein Fehler vorliegt.