0 Tage Serie
javascript / intermediate
Snippet

Asynchrone Fehlerbehandlung mit try-catch in Hooks

Die fortgeschrittene React-Entwicklung erfordert eine robuste Fehlerbehandlung in asynchronen Effekten, um fehlgeschlagene Netzwerkanfragen und UI-Zustände zu verwalten.

snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
useEffect(() => {
const fetchData = async () => {
try {
setLoading(true);
const response = await fetch('/api/data');
if (!response.ok) throw new Error('Network response was not ok');
const json = await response.json();
setData(json);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
fetchData();
}, []);
react
Erklärung
1
try { ... } catch (err)
Standardblock zum Abfangen von Ausnahmen während der asynchronen Ausführung.
2
if (!response.ok) throw ...
Löst manuell einen Fehler für HTTP-Statuscodes wie 404 oder 500 aus.
3
finally { setLoading(false) }
Stellt sicher, dass der Ladezustand zurückgesetzt wird, unabhängig davon, ob der Aufruf erfolgreich war oder nicht.