JavaScript Fetch: API-Anfragen ohne überflüssigen Code

JavaScript fetch ist eine integrierte Möglichkeit, um API-Anfragen zu senden und dabei den Code übersichtlich zu halten. Neben der Standardlösung GET für die Datenanfrage kann man die API auch zum Versenden, Ändern und Löschen von Daten nutzen.

Was ist JavaScript fetch und wofür wird es verwendet?

JavaScript fetch ist eine Möglichkeit, um API-Anfragen mit Promises zu stellen. Diese Art der Interaktion verhindert, dass der Code unübersichtlich wird und bietet darüber hinaus zahlreiche weitere Funktionen. JavaScript fetch sendet dabei eine Anfrage an einen gewünschten Server und führt diese im Hintergrund aus. Wie genau das funktioniert und welche Möglichkeiten Ihnen die fetch-API bietet, erläutern wir Ihnen in den folgenden Abschnitten.

Die Vorteile eines Promise-Objekts

Um die Funktionsweise von JavaScript fetch verstehen zu können, ist ein Blick auf Promise-Objekte nötig. Promises, die mit JavaScript ES6 eingeführt wurden, sollen die Abwicklung asynchroner Operationen ermöglichen bzw. erleichtern. Wie der Name andeutet, handelt es sich bei einem Promise-Objekt um eine Art Versprechen: Wird dieses erfüllt, indem der Code funktioniert, erhält man einen Wert. Kann die Zusage nicht erfüllt werden, gibt es ein Fehler-Objekt als Antwort. Als Ersatz oder Ergänzung für einen Callback machen Promises asynchrone Abläufe verlässlicher und verbessern die Lesbarkeit des Codes.

Promises können die Zustände „pending“ (ausstehend), „fulfilled“ (erfüllt) oder „rejected“ (abgelehnt) haben.

• pending: Die Operation wurde bisher weder ausgeführt noch abgebrochen.
• fulfilled: Die Operation wurde erfolgreich ausgeführt.
• rejected: Die Operation ist fehlgeschlagen.

Im Fall von „fulfilled“ und „rejected“ können Sie mit Methoden wie then() oder catch() reagieren. JavaScript fetch bedient sich dieser Möglichkeiten und nutzt die Promises, um einen XHR-Request zu einem Server auszuführen.

Die Funktionsweise von JavaScript fetch

Die grundsätzliche Syntax von JavaScript fetch ist schnell erklärt. Sie sieht so aus:

fetch()

Die Methode kann zwei Argumente berücksichtigen. Zum einen eine URL, die mit Anführungszeichen zwischen den beiden Klammern eingetragen wird. Zum anderen ein Objekt mit Optionen, das allerdings nicht genutzt werden muss. Es wird im Anschluss an die eigentliche Anweisung eingesetzt.

Um die Funktionsweise und den Aufbau besser veranschaulichen zu können, nutzen wir den folgenden Beispielcode:

fetch(url)
.then(function() {
})
.catch(function() {
});

Im ersten Schritt hinterlegen wir so als Parameter die URL der theoretischen API. Danach folgt die Promise-Methode then(), die um eine Funktion erweitert wird. Diese soll ausgeführt werden, wenn Promise die Variable resolve zurückgibt. resolve wird genutzt, wenn eine Aktion als erfolgreich deklariert werden soll. Die Funktion von then() enthält den Code, der für den Umgang mit den Daten benötigt wird, die von der API empfangen wurden.

Darunter haben wir die Methode catch() eingesetzt. Diese wird aufgerufen, wenn die Variable reject zurückgegeben wird. reject wird dann ausgegeben, wenn die API nicht aufgerufen werden kann oder andere Fehler auftreten. Für diesen Fall wird die Funktion innerhalb von catch() ausgeführt. So sind Sie mit nur drei Zeilen auf alle Eventualitäten vorbereitet und können API-Anfragen mit JavaScript fetch initiieren.

GET-Anfragen mit JavaScript fetch

Sie können JavaScript fetch nutzen, um Daten aus einer API abzurufen. Im folgenden Beispiel führen wir eine GET-Anfrage durch. Dies ist die standardmäßige Einstellung von JavaScript fetch. Dafür hinterlegen wir nun erneut eine beispielhafte URL. Diese wird mit einem Promise antworten, auf den wir die Methode then() anwenden. Wir wandeln dann die Antwort des Servers in ein JSON-Objekt um und nutzen danach erneut eine then()-Methode, um uns die so erhaltenen Daten in der Konsole anzeigen zu lassen. Ein passender Code für die Operation könnte so aussehen:

fetch("https://beispielurl.com/api")
.then((response) => response.json())
.then((json) => console.log(json));

Daten senden mit POST

Auch wenn die GET-Anfrage der Standard ist, können Sie mit JavaScript fetch auch POST-Operationen durchführen. Diese werden genutzt, um Daten zu senden. Erneut müssen wir dafür zunächst die gewünschte URL angeben. Anschließend verwenden wir den Schlüssel method, um den Anfragetyp festzulegen. Dieser hat in unserem Fall den Wert „POST“. Es folgen zwei weitere obligatorische Schlüssel: body und headers.

body definiert die Daten, die an den Server geschickt werden sollen. Der Schlüssel besteht in unserem Fall aus den Parametern title und body. Wir nutzen außerdem JSON.stringify, um die Daten in einen String zu konvertieren. headers wird eingesetzt, um den Datentyp festzulegen, der an den Server gesendet werden soll. In unserem Fall soll es sich dabei um JSON-Daten handeln und wir wählen die Standardcodierung UTF-8. Beide Schlüssel müssen für eine POST-Anfrage definiert werden. Für unser Beispiel von oben würde der entsprechende Code nun so aussehen:

fetch("https://beispielurl.com/api", {
	method: "POST",
	body: JSON.stringify({
		title: "Hier steht der Titel",
		body: "Hier steht der Inhalt",
	}),
	headers: {
		"Content-type": "application/json; charset=UTF-8",
	},
})
.then((response) => response.json())
.then((json) => console.log(json));

Objekte aktualisieren mit PUT oder PATCH

Mit einer PUT- oder PATCH-Anfrage kann ein Objekt komplett aktualisiert werden. Auch das ist mit JavaScript fetch möglich. Die Herangehensweise ist ähnlich wie beim vorigen Beispiel. Es muss also wieder eine body-Option mit String beziehungsweise JSON.stringify geben und wir geben den Inhaltstyp über application/json an. Für unser Beispiel ist dies der Code:

fetch("https://beispielurl.com/api", {
	method: "PUT",
	body: JSON.stringify({
		title: "Hier steht der Titel",
		body: "Hier steht der Inhalt",
	}),
	headers: {
		"Content-type": "application/json; charset=UTF-8",
	},
})
.then((response) => response.json())
.then((json) => console.log(json));

Statt PUT können Sie alterativ auch PATCH einsetzen.

Objekte entfernen mit DELETE

Möchten Sie JavaScript fetch nutzen, um ein Objekt zu löschen, eignet sich dafür eine DELETE-Anfrage. Bei Bedarf können Sie auch hier zusätzlich die Methode then() implementieren. Dies wäre ein entsprechendes Beispiel:

fetch("https://beispielurl.com/api", {
    method: "DELETE",
})
.then(() => {
    element.innerHTML = "Erfolgreich entfernt";
})
.catch((error) => {
    console.error('Fehler bei der Anfrage:', error);
});