Einführung
Die Fetch-API stellt eine wesentliche Weiterentwicklung der Art und Weise dar, wie Webanwendungen mit Servern interagieren und Inhalte über das Netzwerk abrufen. Die Fetch-API wurde als moderne Alternative zum XMLHttpRequest (XHR) eingeführt und bietet Entwicklern mehr Leistung, Flexibilität und Einfachheit. Durch die Integration in moderne Browser ist Fetch zu einem entscheidenden Werkzeug für die Erstellung zeitgemäßer Webanwendungen geworden und ermöglicht eine natürlichere und effizientere Handhabung asynchroner Vorgänge.

Was ist die Fetch-API?
Die Fetch-API ist eine JavaScript-Schnittstelle, die das Senden von HTTP-Anfragen und die Verarbeitung von Netzwerkantworten vereinfacht. Im Gegensatz zum älteren XMLHttpRequest, das für seine Komplexität und umständliche Syntax bekannt war, bietet Fetch eine optimierte Schnittstelle, die sich nahtlos in die Promise-API von JavaScript integrieren lässt. Diese Integration erleichtert nicht nur die Verwaltung asynchroner Vorgänge, sondern verbessert auch die Lesbarkeit und Wartbarkeit des Codes, wodurch Ihre Codebasis sauberer und verwaltbarer wird.

Im Kern basiert Fetch auf der Funktion fetch(), einer globalen Funktion, die in modernen Browsern verfügbar ist und eine Netzwerkanfrage sendet. Diese Funktion gibt ein Promise zurück, das in ein Response-Objekt aufgelöst wird und Entwicklern einfachen Zugriff auf die Antwortdaten, Header und den Status ermöglicht. Dies ermöglicht einen intuitiveren und organisierteren Ansatz für den Umgang mit den Ergebnissen von Netzwerkanfragen. (Mehr lesen)

Grundlegende Syntax
Die Fetch-API dreht sich um die Funktion fetch(), die sowohl einfach als auch leistungsstark konzipiert ist. Die Funktion wird zum Initiieren von Netzwerkanfragen verwendet und verfügt über zwei Hauptargumente:

• URL: Die URL-Zeichenfolge der Ressource, die Sie abrufen möchten.
• Optionen (Optional): Ein Objekt, das verschiedene Einstellungen oder Konfigurationen für die Anfrage enthält, wie z. B. die HTTP-Methode, Header, Textinhalt und Modus.

Struktur eines einfachen Fetch-Aufrufs
Ein einfacher Abrufaufruf ist unkompliziert und sieht folgendermaßen aus:

fetch(url)
  .then(response => {
    // Handle the response here
  })
  .catch(error => {
    // Handle any errors here
  });

• URL ist die Adresse der abzurufenden Ressource.
• Die then()-Methode verarbeitet das von der Fetch-API aufgelöste Promise und stellt das Response-Objekt bereit.
• Die Methode „catch()“ behandelt alle Fehler, die während der Anfrage auftreten können.

Beispiel einer einfachen Abrufanforderung

fetch('https://api.example.com/data')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error('Error:', error);
  });

Dieses Beispiel zeigt, wie eine einfache Abrufanforderung gestellt wird, wobei die Antwort bei Erfolg in der Konsole protokolliert wird und Fehler ordnungsgemäß behandelt werden.

Warum Fetch verwenden?

Vorteile der Verwendung von Fetch

Promises: Einer der bedeutendsten Vorteile von Fetch ist die Verwendung von Promises. Versprechen bieten im Vergleich zum rückrufbasierten Ansatz von XHR eine sauberere und besser verwaltbare Möglichkeit, asynchrone Aufgaben zu bearbeiten. Mit Promises können Sie .then()-Methoden zur Behandlung erfolgreicher Antworten und .catch()-Methoden zur Fehlerverwaltung verketten, was zu einem Code führt, der besser lesbar und einfacher zu debuggen ist.

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

Darüber hinaus lässt sich die Fetch-API hervorragend mit der Async/Await-Syntax kombinieren, wodurch asynchroner Code noch einfacher wird.

Beispiel für die Verwendung von async/await:

async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

Sauberere Syntax: Fetch bietet im Vergleich zu XHR eine moderne und weniger ausführliche Syntax. Das an fetch() übergebene Konfigurationsobjekt erleichtert das Festlegen von Anforderungsparametern wie der HTTP-Methode, Headern und Textinhalten, was zu saubererem und besser wartbarem Code führt. (Vollständigen Artikel lesen

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Stream-Verarbeitung: Fetch unterstützt das Antwort-Streaming, wodurch Entwickler große Datenmengen effizienter verarbeiten können. Während XHR möglicherweise mit großen Antworten zu kämpfen hat, was zu Leistungsproblemen führt oder zusätzliche Verarbeitung für die Verarbeitung in Blöcken erfordert, bietet das Antwortobjekt von Fetch Methoden wie .body.getReader() zum Lesen von Daten in Blöcken. Dies ist besonders nützlich für das Streaming und die Verwaltung großer Datenmengen.

fetch('https://api.example.com/large-data')
  .then(response => {
    const reader = response.body.getReader();
    let decoder = new TextDecoder();
    let result = '';

    return reader.read().then(function processText({ done, value }) {
      if (done) {
        console.log('Stream finished.');
        return result;
      }
      result  = decoder.decode(value, { stream: true });
      return reader.read().then(processText);
    });
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Vollständigen Artikel lesen – Klicken Sie hier

Abschluss
Die Fetch-API hat die Art und Weise revolutioniert, wie Entwickler Netzwerkanfragen in Webanwendungen stellen. Mit seiner saubereren Syntax, der nahtlosen Integration mit Promises und der Unterstützung moderner Funktionen wie Async/Await und Streaming bietet Fetch ein leistungsstarkes und flexibles Tool für die Bearbeitung von HTTP-Anfragen. Während sich die Webentwicklung weiterentwickelt, wird die Fetch-API weiterhin eine entscheidende Komponente beim Erstellen effizienter, wartbarer und moderner Webanwendungen bleiben.