Ja­va­Script Fetch: API-Anfragen ohne über­flüs­si­gen Code

Ja­va­Script fetch ist eine in­te­grier­te Mög­lich­keit, um API-Anfragen zu senden und dabei den Code über­sicht­lich zu halten. Neben der Stan­dard­lö­sung GET für die Da­ten­an­fra­ge kann man die API auch zum Versenden, Ändern und Löschen von Daten nutzen.

Was ist Ja­va­Script fetch und wofür wird es verwendet?

Ja­va­Script fetch ist eine Mög­lich­keit, um API-Anfragen mit Promises zu stellen. Diese Art der In­ter­ak­ti­on ver­hin­dert, dass der Code un­über­sicht­lich wird und bietet darüber hinaus zahl­rei­che weitere Funk­tio­nen. Ja­va­Script fetch sendet dabei eine Anfrage an einen ge­wünsch­ten Server und führt diese im Hin­ter­grund aus. Wie genau das funk­tio­niert und welche Mög­lich­kei­ten Ihnen die fetch-API bietet, erläutern wir Ihnen in den folgenden Ab­schnit­ten.

Die Vorteile eines Promise-Objekts

Um die Funk­ti­ons­wei­se von Ja­va­Script fetch verstehen zu können, ist ein Blick auf Promise-Objekte nötig. Promises, die mit Ja­va­Script ES6 ein­ge­führt wurden, sollen die Ab­wick­lung asyn­chro­ner Ope­ra­tio­nen er­mög­li­chen bzw. er­leich­tern. Wie der Name andeutet, handelt es sich bei einem Promise-Objekt um eine Art Ver­spre­chen: Wird dieses erfüllt, indem der Code funk­tio­niert, 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 asyn­chro­ne Abläufe ver­läss­li­cher und ver­bes­sern die Les­bar­keit des Codes.

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

• pending: Die Operation wurde bisher weder aus­ge­führt noch ab­ge­bro­chen.
• fulfilled: Die Operation wurde er­folg­reich aus­ge­führt.
• rejected: Die Operation ist fehl­ge­schla­gen.

Im Fall von „fulfilled“ und „rejected“ können Sie mit Methoden wie then() oder catch() reagieren. Ja­va­Script fetch bedient sich dieser Mög­lich­kei­ten und nutzt die Promises, um einen XHR-Request zu einem Server aus­zu­füh­ren.

Die Funk­ti­ons­wei­se von Ja­va­Script fetch

Die grund­sätz­li­che Syntax von Ja­va­Script fetch ist schnell erklärt. Sie sieht so aus:

fetch()

Die Methode kann zwei Argumente be­rück­sich­ti­gen. Zum einen eine URL, die mit An­füh­rungs­zei­chen zwischen den beiden Klammern ein­ge­tra­gen wird. Zum anderen ein Objekt mit Optionen, das al­ler­dings nicht genutzt werden muss. Es wird im Anschluss an die ei­gent­li­che Anweisung ein­ge­setzt.

Um die Funk­ti­ons­wei­se und den Aufbau besser ver­an­schau­li­chen zu können, nutzen wir den folgenden Bei­spiel­code:

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

Im ersten Schritt hin­ter­le­gen wir so als Parameter die URL der theo­re­ti­schen API. Danach folgt die Promise-Methode then(), die um eine Funktion erweitert wird. Diese soll aus­ge­führt werden, wenn Promise die Variable resolve zu­rück­gibt. resolve wird genutzt, wenn eine Aktion als er­folg­reich de­kla­riert 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() ein­ge­setzt. Diese wird auf­ge­ru­fen, wenn die Variable reject zu­rück­ge­ge­ben wird. reject wird dann aus­ge­ge­ben, wenn die API nicht auf­ge­ru­fen werden kann oder andere Fehler auftreten. Für diesen Fall wird die Funktion innerhalb von catch() aus­ge­führt. So sind Sie mit nur drei Zeilen auf alle Even­tua­li­tä­ten vor­be­rei­tet und können API-Anfragen mit Ja­va­Script fetch in­iti­ie­ren.

GET-Anfragen mit Ja­va­Script fetch

Sie können Ja­va­Script fetch nutzen, um Daten aus einer API abzurufen. Im folgenden Beispiel führen wir eine GET-Anfrage durch. Dies ist die stan­dard­mä­ßi­ge Ein­stel­lung von Ja­va­Script fetch. Dafür hin­ter­le­gen wir nun erneut eine bei­spiel­haf­te 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 er­hal­te­nen 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 Ja­va­Script fetch auch POST-Ope­ra­tio­nen durch­füh­ren. Diese werden genutzt, um Daten zu senden. Erneut müssen wir dafür zunächst die ge­wünsch­te URL angeben. An­schlie­ßend verwenden wir den Schlüssel method, um den An­fra­ge­typ fest­zu­le­gen. Dieser hat in unserem Fall den Wert „POST“. Es folgen zwei weitere ob­li­ga­to­ri­sche 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 Pa­ra­me­tern title und body. Wir nutzen außerdem JSON.stringify, um die Daten in einen String zu kon­ver­tie­ren. headers wird ein­ge­setzt, um den Datentyp fest­zu­le­gen, der an den Server gesendet werden soll. In unserem Fall soll es sich dabei um JSON-Daten handeln und wir wählen die Stan­dard­co­die­rung UTF-8. Beide Schlüssel müssen für eine POST-Anfrage definiert werden. Für unser Beispiel von oben würde der ent­spre­chen­de 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 ak­tua­li­sie­ren mit PUT oder PATCH

Mit einer PUT- oder PATCH-Anfrage kann ein Objekt komplett ak­tua­li­siert werden. Auch das ist mit Ja­va­Script fetch möglich. Die Her­an­ge­hens­wei­se ist ähnlich wie beim vorigen Beispiel. Es muss also wieder eine body-Option mit String be­zie­hungs­wei­se JSON.stringify geben und wir geben den In­halts­typ ü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 Ja­va­Script fetch nutzen, um ein Objekt zu löschen, eignet sich dafür eine DELETE-Anfrage. Bei Bedarf können Sie auch hier zu­sätz­lich die Methode then() im­ple­men­tie­ren. Dies wäre ein ent­spre­chen­des Beispiel:

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