API-Kommunikation mit Fetch – Modern mit Async/Await

Die Fetch API bietet eine moderne und elegante Art, HTTP-Anfragen mit JavaScript zu stellen. Mit async/await werden API-Abfragen besonders übersichtlich und einfach zu verwenden.

Was ist die Fetch API?

Mit der Fetch API können Daten aus dem Internet abgerufen oder an einen Server gesendet werden. Sie ist fester Bestandteil moderner Browser und verzichtet auf zusätzliche Bibliotheken.

Vorteile der Fetch API:

• Moderne, leicht verständliche Syntax
• Direkt in JavaScript integriert
• Asynchrone Verarbeitung mit Promises und async/await
• Einfache Fehlerbehandlung

Grundlegende Nutzung mit async/await

Mit async/await können Sie asynchrone Vorgänge (wie das Laden von Daten aus dem Internet) so schreiben, als wären es normale, schrittweise Anweisungen.

Kurz gesagt:

• async macht eine Funktion „asynchron“ – sie kann warten, bis Aufgaben abgeschlossen sind.
• await pausiert den Code, bis das Ergebnis verfügbar ist, und sorgt so für einen logischen, gut nachvollziehbaren Ablauf.

Eine Datenabfrage mit async/await sieht so aus:

async function ladeDaten() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Netzwerkantwort war nicht ok');
    }
    const daten = await response.json();
    console.log(daten);
  } catch (error) {
    console.error('Fehler:', error);
  }
}

ladeDaten();

Warum await?

Würde man hier das await weglassen, läuft der Code direkt weiter, ohne auf das Ergebnis zu warten. Sie erhalten dann statt der eigentlichen Daten nur ein Promise-Objekt, das Sie nicht direkt verwenden können – der Ablauf stimmt nicht mehr und Fehler sind wahrscheinlicher.

Kurz: Ohne await fährt der Code sofort fort und Sie erhalten kein Ergebnis, sondern ein Versprechen (Promise), das später erfüllt wird.

Daten abrufen (GET)

Mit GET werden Daten einfach geladen:

async function getPost() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    if (!response.ok) {
      throw new Error('Netzwerkfehler');
    }
    const data = await response.json();
    document.getElementById('ergebnis').textContent = data.title;
  } catch (error) {
    document.getElementById('fehler').textContent = 'Fehler: ' + error.message;
  }
}

getPost();

Daten senden (POST)

Datenversand erfolgt durch die POST-Methode:

async function erstelleBeitrag() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        title: 'Neuer Beitrag',
        body: 'Dies ist der Inhalt des neuen Beitrags',
        userId: 1
      })
    });
    if (!response.ok) {
      throw new Error('Netzwerkfehler');
    }
    const data = await response.json();
    document.getElementById('ergebnis').textContent = 'Beitrag erstellt mit ID: ' + data.id;
  } catch (error) {
    document.getElementById('fehler').textContent = 'Fehler: ' + error.message;
  }
}

erstelleBeitrag();

Fehlerbehandlung

Auch mit async/await bleibt die Prüfung von HTTP-Fehlern wichtig:

async function getBeitragMitFehlerpruefung() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/999');
    if (!response.ok) {
      throw new Error(`HTTP-Fehler! Status: ${response.status}`);
    }
    const data = await response.json();
    document.getElementById('ergebnis').textContent = JSON.stringify(data);
  } catch (error) {
    document.getElementById('fehler').textContent = 'Fehler: ' + error.message;
  }
}

getBeitragMitFehlerpruefung();

Übung: Praktische Anwendung mit fetch

Aufgabe: Benutzerdaten und Beiträge per Fetch laden

Ihre Aufgabe:
Erstellen Sie eine kleine Webseite mit zwei Buttons:

1. “Benutzer laden” – Lädt einen beliebigen Benutzer und zeigt Name und E-Mail an.
2. “Beiträge laden” – Lädt die Beiträge des Benutzers und zeigt die Titel an.

So gehen Sie vor:

• Legen Sie eine HTML-Datei mit folgenden Elementen an:
• Zwei Buttons mit den IDs loadUser und loadPosts
• Einen Ausgabebereich <div id="output"></div>
• Schreiben Sie Ihren Code in script.js und nutzen Sie die Fetch API mit async/await.

Hinweise:

• API-Endpunkte:
• Benutzer: https://jsonplaceholder.typicode.com/users/1
• Beiträge: https://jsonplaceholder.typicode.com/posts?userId=1
• Zeigen Sie passende Fehlermeldungen im Ausgabebereich an, falls etwas schiefgeht.
• Starten Sie mit dem Beispiel unten, aber programmieren Sie die Funktionen selbst!

Startpunkt für HTML:

<button id="loadUser">Benutzer laden</button>
<button id="loadPosts">Beiträge laden</button>
<div id="output"></div>

Zusammenfassung

Mit der modernen Fetch API in Kombination mit async/await gestalten Sie HTTP-Anfragen in JavaScript besonders übersichtlich:

• Daten abrufen mit GET und senden mit POST, PUT oder DELETE
• Ergebnisse einfach mit await response.json() als JavaScript-Objekte verwenden
• Fehlerbehandlung durch Überprüfung von response.ok
• Die Ergebnisse können direkt in Ihrer Benutzeroberfläche genutzt und angezeigt werden

Async/await erleichtert die Arbeit mit asynchronen Datenquellen und macht Ihren Code lesbarer und wartbarer. So verbinden Sie Frontend und Backend effizient und modern.

---