Daten beim Mounten abrufen
Rufen Sie JSON innerhalb von useEffect von einer API ab, speichern Sie die Antwort im State und lösen Sie den Abruf mit einem leeren Dependency-Array nur einmal aus.
Daten beim Mounten abrufen ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.
Das Muster zum Abrufen von Daten
Das standardmäßige Muster zum Abrufen von Daten in React: 1) Definieren Sie State für Laden, Fehler und Daten, 2) rufen Sie Daten in useEffect mit dem leeren Dependency-Array [] ab, 3) aktualisieren Sie den State im Callback, 4) rendern Sie abhängig vom State.
Vollständiges Beispiel
Ein vollständiges Beispiel, das beim Mounten Benutzer mit Lade- und Fehlerbehandlung abruft.
interface User { id: number; name: string; email: string; }
function UserList() {
const [users, setUsers] = useState<User[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
fetch('/api/users')
.then(res => {
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return res.json();
})
.then(data => setUsers(data))
.catch(err => setError(err.message))
.finally(() => setLoading(false));
}, []);
if (loading) return <Spinner />;
if (error) return <ErrorMessage message={error} />;
return <ul>{users.map(u => <UserItem key={u.id} {...u} />)}</ul>;
}async/await in useEffect verwenden
Der Callback von useEffect kann nicht direkt async sein (er würde ein Promise zurückgeben, das React als Cleanup-Funktion interpretieren würde). Definieren Sie stattdessen eine innere async-Funktion und rufen Sie sie sofort auf.
useEffect(() => {
async function fetchUsers() {
try {
const res = await fetch('/api/users');
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();
setUsers(data);
} catch (err) {
setError((err as Error).message);
} finally {
setLoading(false);
}
}
fetchUsers();
}, []);Den Antwortstatus prüfen
fetch löst bei HTTP-Fehlern (4xx, 5xx) keine Exception aus – nur bei Netzwerkfehlern. Prüfen Sie immer response.ok und lösen Sie bei Fehlerantworten manuell eine Exception aus.
const res = await fetch('/api/data');
if (!res.ok) {
// Could also use res.status for specific handling
throw new Error(`Server responded ${res.status}: ${res.statusText}`);
}
const data = await res.json();Abrufen von Daten bei Änderung einer Dependency
Fügen Sie die Dependency, etwa eine ID aus Routenparametern oder Props, zum Dependency-Array des Effects hinzu. Der Effect wird erneut ausgeführt und ruft aktuelle Daten ab, sobald sich die Dependency ändert.
const { userId } = useParams();
useEffect(() => {
if (!userId) return;
setLoading(true);
fetch(`/api/users/${userId}`)
.then(r => r.json())
.then(setUser)
.finally(() => setLoading(false));
}, [userId]);POST-Anfragen in Effects
Effects können auch POST-, PUT- und DELETE-Anfragen senden. Diese werden jedoch normalerweise durch Ereignisse ausgelöst, etwa das Absenden eines Formulars oder einen Button-Klick, und nicht durch gemountete Effects. Verwenden Sie Effects zum Laden von Daten und Event-Handler für Mutationen.
Benutzerdefinierter useFetch-Hook
Lagern Sie das Muster aus Abruf, Ladezustand und Fehlerbehandlung in einen benutzerdefinierten Hook aus, um es in mehreren Komponenten wiederzuverwenden.
function useFetch<T>(url: string) {
const [data, setData] = useState<T | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
setLoading(true);
fetch(url)
.then(r => { if (!r.ok) throw new Error(`${r.status}`); return r.json(); })
.then(setData)
.catch(e => setError(e.message))
.finally(() => setLoading(false));
}, [url]);
return { data, loading, error };
}JSON sicher parsen
Umschließen Sie res.json() immer mit try/catch – ungültiges JSON löst eine SyntaxError-Exception aus. Der äußere catch-Block behandelt sie, aber wenn Sie ihre Quelle kennen, erleichtert das die Fehlersuche.
Konfiguration der API-Basis-URL
Hardcodieren Sie keine API-URLs. Verwenden Sie Umgebungsvariablen (import.meta.env.VITE_API_URL) für die Basis-URL. Erstellen Sie eine zentrale Datei api.ts mit einem konfigurierten fetch-Wrapper.
const API_BASE = import.meta.env.VITE_API_URL;
async function apiFetch<T>(path: string): Promise<T> {
const res = await fetch(`${API_BASE}${path}`, {
headers: { 'Authorization': `Bearer ${getToken()}` }
});
if (!res.ok) throw new Error(`API error ${res.status}`);
return res.json();
}Wann Sie zu React Query wechseln sollten
Manuelle Fetch-Muster funktionieren in einfachen Fällen. Wenn Sie Caching, das erneute Abrufen im Hintergrund, Pagination oder Mutationen benötigen, wechseln Sie zu React Query (TanStack Query) – diese Lösung behandelt all diese Muster zuverlässig.
Ein Loading-Skeleton anzeigen
Zeigen Sie statt eines Spinners eine Skeleton-UI an, die der Form des geladenen Inhalts entspricht. Das verkürzt die wahrgenommene Ladezeit und verhindert Layout-Verschiebungen.
Kurztest
Warum kann der Callback von useEffect nicht direkt async sein?
Zusammenfassung: Datenabruf in useEffect
Definieren Sie State für Laden, Fehler und Daten. Rufen Sie Daten in useEffect mit dem leeren Dependency-Array [] ab. Definieren Sie eine innere async-Funktion – machen Sie den Callback nicht async. Prüfen Sie immer res.ok. Fügen Sie URL oder ID als Dependency hinzu, wenn der Abruf dynamisch erfolgen soll. Lagern Sie das Muster zur Wiederverwendung in einen benutzerdefinierten useFetch-Hook aus. Ziehen Sie TanStack Query für Datenabrufe in Produktionsanwendungen in Betracht.
Häufig gestellte Fragen
Ist die Lektion „Daten beim Mounten abrufen“ kostenlos?
Ja — der vollständige Text von „Daten beim Mounten abrufen“ 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 „Daten beim Mounten abrufen“?
Rufen Sie JSON innerhalb von useEffect von einer API ab, speichern Sie die Antwort im State und lösen Sie den Abruf mit einem leeren Dependency-Array nur einmal 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 2 von 4.
Wie lange dauert die Lektion „Daten beim Mounten abrufen“?
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