javascript / beginner
Snippet
Asynchrones Datenladen mit Fehlerbehandlung in useEffect
Verwende beim Laden von Daten in React eine interne asynchrone Funktion innerhalb von useEffect, die mit einem try/catch-Block geschützt ist. Dies ermöglicht es, Netzwerkfehler oder HTTP-Probleme durch Setzen eines Fehler-States sauber abzufangen, anstatt die Anwendung in einem Fehlerzustand zu belassen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { useState, useEffect } from 'react';function UserProfile({ userId }) {const [data, setData] = useState(null);const [error, setError] = useState(null);useEffect(() => {async function loadUser() {try {const res = await fetch(`/api/users/${userId}`);if (!res.ok) throw new Error('Failed to load');const json = await res.json();setData(json);} catch (err) {setError(err.message);}}loadUser();}, [userId]);if (error) return <p>Error: {error}</p>;return <div>{data ? data.name : 'Loading...'}</div>;}
react
Erklärung
1
async function loadUser() {
Deklariert eine asynchrone Hilfsfunktion innerhalb des Effect-Callbacks.
2
if (!res.ok) throw new Error('Failed to load');
Prüft den HTTP-Statuscode und wirft bei fehlerhaften Antworten wie 404 oder 500 einen Fehler.
3
} catch (err) {
Fängt Netzwerk- oder Parsing-Ausnahmen ab und leitet sie in den lokalen State weiter.
4
if (error) return <p>Error: {error}</p>;
Zeigt dem Benutzer eine aussagekräftige Fehlermeldung an, falls das Laden fehlgeschlagen ist.