Fetch API

Die Fetch API ist eine moderne JavaScript-Schnittstelle für das Abrufen von Ressourcen über das Netzwerk, z. B. für HTTP-Requests an eine API oder das Laden von Daten von einem Server. Sie ersetzt weitgehend die ältere XMLHttpRequest-Methode und bietet eine einfachere, flexiblere und leistungsfähigere Möglichkeit, Netzwerkabfragen zu verwalten.

Grundlegende Funktionsweise

• Die Fetch API basiert auf Promises, was asynchrones Arbeiten erleichtert.
• Sie ermöglicht den Abruf von Daten in verschiedenen Formaten wie JSON, Text oder Blob.
• Fetch arbeitet standardmäßig mit der GET-Methode, kann aber auch für POST, PUT, DELETE und andere HTTP-Methoden verwendet werden.

Ein einfaches Beispiel

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json()) // Antwort als JSON umwandeln
  .then(data => console.log(data)) // Daten ausgeben
  .catch(error => console.error('Fehler:', error)); // Fehlerbehandlung

Ein Request mit POST-Methode

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ title: 'Neuer Beitrag', body: 'Inhalt des Beitrags', userId: 1 })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Fehler:', error));

Vorteile der Fetch API

✅ Einfachere Syntax als XMLHttpRequest
✅ Unterstützt async/await für bessere Lesbarkeit
✅ Flexibles Handling von Requests und Responses
✅ Bessere Fehlerbehandlung durch Promises

Die Fetch API ist mittlerweile in allen modernen Browsern verfügbar und eine essentielle Technik für die Webentwicklung.