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

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

async function loadUserData() {

Definiert eine verschachtelte asynchrone Funktion, die das Schlüsselwort await nutzen kann.

const response = await fetch('https://api.example.com/user/1');

Fordert asynchron Daten per HTTP an und pausiert die Ausführung bis zur Antwort.

setUser(data);

Aktualisiert den Zustand der Komponente, sobald das asynchrone JSON-Parsen fertig ist.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Anfänger →

Abrufen entfernter Daten mit Async/Await innerhalb von React-Effekten

Verwandt