javascript / beginner
Snippet
Abrufen entfernter Daten mit Async/Await innerhalb von React-Effekten
Asynchrone Operationen in React erlauben es nicht, die useEffect-Callback-Funktion direkt als async zu deklarieren. Stattdessen wird eine innere async-Funktion definiert und direkt aufgerufen, um HTTP-Promises abzuwarten.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { useState, useEffect } from 'react';function UserProfile() {const [user, setUser] = useState(null);useEffect(() => {async function loadUserData() {const response = await fetch('https://api.example.com/user/1');const data = await response.json();setUser(data);}loadUserData();}, []);return <div>{user ? user.name : 'Loading...'}</div>;}
react
Erklärung
1
async function loadUserData() {
Definiert eine verschachtelte asynchrone Funktion, die das Schlüsselwort await nutzen kann.
2
const response = await fetch('https://api.example.com/user/1');
Fordert asynchron Daten per HTTP an und pausiert die Ausführung bis zur Antwort.
3
setUser(data);
Aktualisiert den Zustand der Komponente, sobald das asynchrone JSON-Parsen fertig ist.