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.
- Flexibel: Hosting, das jedem Website-Traffic standhält
- Verlässlich: Inklusive 24/7-Support und persönlicher Beratung
- Sicher: Kostenloses SSL-Zertifikat, DDoS-Schutz und Backups
![](https://www.ionos.de/digitalguide/fileadmin/DigitalGuide/IAS/CTAs/SEO_Digital_Guide_Mobile_nur-Nlement_900x750.png)
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.
Der perfekte Einsatz von GitHub: Mit Deploy Now von IONOS deployen Sie Änderungen am Code direkt und können die Anpassungen in Echtzeit verfolgen. Wählen Sie den passenden Tarif für Ihre Zwecke!
Die Funktionsweise von JavaScript fetch
Die grundsätzliche Syntax von JavaScript fetch
ist schnell erklärt. Sie sieht so aus:
fetch()
javascriptDie 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() {
});
javascriptIm 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));
javascriptDaten 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));
javascriptObjekte 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));
javascriptStatt 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);
});
javascriptIn unserem Digital Guide finden Sie zahlreiche weitere Artikel zur beliebten Skriptsprache. Hier gibt es zum Beispiel die beliebtesten Frameworks und Bibliotheken für JavaScript sowie eine Anleitung, wie Sie JavaScript in HTML einbinden.