# 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](https://www.ionos.de/digitalguide/websites/web-entwicklung/was-ist-eine-api/) 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.

Tipp Der perfekte Einsatz von GitHub: Mit [Deploy Now](https://www.ionos.de/hosting/deploy-now "Deploy Now von IONOS") 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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

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

Tipp In unserem Digital Guide finden Sie zahlreiche weitere Artikel zur beliebten Skriptsprache. Hier gibt es zum Beispiel die [beliebtesten Frameworks und Bibliotheken für JavaScript](https://www.ionos.de/digitalguide/websites/web-entwicklung/beliebte-javascript-frameworks-und-bibliotheken/) sowie eine Anleitung, wie Sie [JavaScript in HTML einbinden](https://www.ionos.de/digitalguide/websites/web-entwicklung/javascript-in-html-einbinden/).


This is a markdown version of: [https://www.ionos.de/digitalguide/websites/web-entwicklung/javascript-fetch-api/](https://www.ionos.de/digitalguide/websites/web-entwicklung/javascript-fetch-api/) for AI/LLM consumption.