javascript / beginner
Snippet
Asynchrones Abrufen von Remote-Daten innerhalb von useEffect
Asynchrone Operationen wie HTTP-Anfragen nutzen async/await zusammen mit try...catch-Blöcken. Das saubere Abfangen von Netzwerkfehlern verhindert ungefangene Promises und ermöglicht die Anzeige einer Fehlermeldung.
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
24
import React, { useState, useEffect } from 'react';function UserProfile({ userId }) {const [user, setUser] = useState(null);const [errorMessage, setErrorMessage] = useState('');useEffect(() => {async function loadData() {try {const res = await fetch(`https://api.example.com/users/${userId}`);if (!res.ok) throw new Error('User not found');const data = await res.json();setUser(data);} catch (err) {setErrorMessage(err.message);}}loadData();}, [userId]);if (errorMessage) return <p>Error: {errorMessage}</p>;if (!user) return <p>Loading...</p>;return <h2>{user.name}</h2>;}
react
Erklärung
1
async function loadData() {
Deklariert eine asynchrone innere Funktion, um Netzwerkanfragen im Effect-Hook abzuwarten.
2
try { ... } catch (err) {
Fängt potenzielle Laufzeit-, Netzwerk- oder Parsing-Fehler ab, um die Nachricht im State zu speichern.