Willkommen in Phase 5, der letzten Phase dieses Tutorials: Wir verbinden unsere App endlich mit einer echten API. Bevor es losgeht, ein kurzer Vergleich der zwei gängigsten Wege, HTTP-Anfragen in React (und JavaScript allgemein) zu stellen.

Die eingebaute fetch()-Funktion

fetch() ist Teil jedes modernen Browsers (und damit auch jeder React-Web-App) – kein zusätzliches Paket nötig:

fetch('https://example.com/api/produkte')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

Axios: die populäre Alternative

npm install axios

import axios from 'axios';

axios.get('https://example.com/api/produkte')
  .then((response) => console.log(response.data))
  .catch((error) => console.error(error));

Die wichtigsten Unterschiede

Das mit response.ok ist der Punkt, an dem die meisten Anfänger stolpern: Ein 404 ("nicht gefunden") oder 500 ("Serverfehler") ist für fetch() technisch eine ERFOLGREICHE Netzwerk-Antwort – nur der INHALT der Antwort ist eine Fehlermeldung. fetch() landet deshalb bei einem 404 NICHT automatisch in .catch(), sondern Sie müssen selbst prüfen:

fetch('https://example.com/api/produkte/existiert-nicht')
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP-Fehler: ${response.status}`);
    }
    return response.json();
  })
  .catch((error) => console.error(error));