07. Fetch API i dane asynchroniczne

O czym jest ta prezentacja?

Fetch API i dane asynchroniczne

Fetch API to wbudowany w przeglądarkę interfejs do wykonywania zapytań HTTP. W React łączymy go z useEffect i async/await do pobierania danych z serwera. Kluczowe: obsługa stanów loading, error i data.

Kluczowe pytania do odpowiedzi

Jak działa Fetch API? — Zwraca Promise, dwuetapowe: response.ok + response.json()
Dlaczego fetch wewnątrz useEffect? — Efekty uboczne po renderze, unikanie race conditions
Jak obsłużyć loading/error/data? — Trzy stany komponentu
Co to jest race condition? — Starszy fetch przychodzi po nowszym — AbortController jako rozwiązanie

Zakres merytoryczny

Fetch API — podstawy — URL, metody HTTP, headers, body
async/await z fetch — składnia, dwuetapowe odczytywanie odpowiedzi
Trzy stany — loading, error, data — wzorzec obsługi
AbortController — anulowanie fetch przy odmontowaniu lub zmianie zależności
HTTP metody — GET, POST, PUT, DELETE z przykładami

Wymagane elementy wizualne

Schemat

Diagram sekwencji: Komponent renderuje → useEffect → fetch request → serwer → response → setState(data) → re-render z danymi. Pokaż oddzielnie ścieżkę błędu.

Przykład kodu JSX

Komponent listy użytkowników z pełną obsługą loading/error/data i przyciskiem “Odśwież”.

Warianty realizacji

Fetch API — podstawy, Promise vs async/await
GET request w useEffect
Trzy stany: loading, error, data

Forma: 10 slajdów, 10 minut

Ocena: 3.0

Scenariusze i przykłady

Przykład 1 — Pobieranie listy użytkowników

function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();

    async function loadUsers() {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users', {
          signal: controller.signal,
        });

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        setUsers(data);
      } catch (err) {
        if (err.name !== 'AbortError') {
          setError(err.message);
        }
      } finally {
        setLoading(false);
      }
    }

    loadUsers();
    return () => controller.abort();
  }, []);

  if (loading) return <p>Ładowanie użytkowników...</p>;
  if (error) return <p>Błąd: {error}</p>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name} — {user.email}</li>
      ))}
    </ul>
  );
}

Przykład 2 — POST request (tworzenie zasobu)

async function createUser(userData) {
  const response = await fetch('/api/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(userData),
  });

  if (!response.ok) {
    throw new Error('Nie udało się utworzyć użytkownika');
  }

  return response.json();
}

Wskazówki do wystąpienia

Użyj JSONPlaceholder

Demonstrując fetch, użyjcie https://jsonplaceholder.typicode.com/users — publiczne API, zawsze dostępne, zwraca sensowne dane.

Pokaż DevTools Network

Otwórzcie DevTools → Network podczas demonstracji. Klasa zobaczy request i response “na żywo” — to świetny efekt wizualny.

Zasoby

MDN — Fetch API Kompletna dokumentacja Fetch API.

JSONPlaceholder Darmowe fake API do ćwiczeń.

Do dzieła!

Fetch to łącznik z serwerem!

Bez pobierania danych aplikacja React żyje w izolacji. Ten temat jest niezbędny w każdym projekcie z backendem!