Einführung
Früher wurde XMLHttpRequest für API-Anfragen verwendet. Es unterstützte keine Promises und erzeugte keinen sauberen JavaScript-Code. Mit jQuery können Sie die übersichtlichere Syntax `jQuery.ajax()` nutzen.
JavaScript bietet nun eine eigene, integrierte Möglichkeit, API-Anfragen zu stellen. Es handelt sich um die Fetch API, einen neuen Standard für Serveranfragen mit Promises, der jedoch zusätzliche Funktionen umfasst.
In diesem Tutorial erstellen Sie sowohl GET- als auch POST-Anfragen mithilfe der Fetch API.
Voraussetzungen
- Eine lokale Entwicklungsumgebung für Node.js.
- Grundkenntnisse in der Programmierung mit JavaScript.
- Promises in JavaScript verstehen.
Schritt 1 – Erste Schritte mit der Fetch-API-Syntax
Eine Möglichkeit, die Fetch API zu nutzen, besteht darin, die fetch() API-URL als Parameter zu übergeben:
fetch(url)
Die Methode `fetch()` gibt ein Promise zurück. Fügen Sie nach der Methode `fetch()` die Promise-Methode `then()` ein.
fetch(url)
.then(function() {
// handle the response
})Wenn das zurückgegebene Promise aufgelöst wird, wird die Funktion innerhalb der `then()`-Methode ausgeführt. Diese Funktion enthält Code zur Verarbeitung der von der API empfangenen Daten.
Fügen Sie nach der then()-Methode die catch()-Methode ein:
fetch(url)
.then(function() {
// handle the response
})
.catch(function() {
// handle the error
});Die mit `fetch()` aufgerufene API kann fehlerhaft sein oder einen anderen Fehler aufweisen. In diesem Fall wird das abgelehnte Promise zurückgegeben. Die `catch`-Methode dient der Behandlung solcher Fehler. Tritt beim Aufruf Ihrer API ein Fehler auf, wird der Code innerhalb von `catch()` ausgeführt.
Nachdem Sie die Syntax für die Verwendung der Fetch API verstanden haben, können Sie nun damit beginnen, fetch() auf einer realen API zu verwenden.
Schritt 2 – Daten mithilfe von Fetch von einer API abrufen
Das folgende Codebeispiel basiert auf der JSONPlaceholder-API. Mithilfe dieser API rufen Sie zehn Benutzer ab und zeigen sie mit JavaScript auf der Seite an. In diesem Tutorial erfahren Sie, wie Sie die Daten von der JSONPlaceholder-API abrufen und in den Listenelementen der Autorenliste anzeigen.
Erstellen Sie zunächst eine HTML-Datei und fügen Sie einen Titel sowie eine ungeordnete Liste mit Autoren-IDs hinzu:
<h1>Authors</h1>
<ul id="authors"></ul>Fügen Sie am Ende Ihrer HTML-Datei Skript-Tags hinzu und verwenden Sie einen DOM-Selektor, um das ul-Element abzurufen. Verwenden Sie getElementById mit den Autoren als Argument:
<h1>Authors</h1>
<ul id="authors"></ul>
<script>
const ul = document.getElementById('authors');
</script>Denken Sie daran, die Autoren haben die vorherige ul-ID erstellt.
Erstellen Sie anschließend eine Liste, die ein DocumentFragment ist:
<script>
// ...
const list = document.createDocumentFragment();
</script>Alle angehängten Listenelemente werden der Liste hinzugefügt. Ein Dokumentfragment ist nicht Teil der aktiven Dokumentbaumstruktur. Dies hat den Vorteil, dass das Neuzeichnen keine Auswirkungen auf die Leistung hat, wenn sich das Dokumentobjektmodell ändert.
Erstelle eine konstante Variable namens url, die die API-URL enthält, die zehn zufällige Benutzer zurückgibt:
<script>
// ...
const url = 'https://jsonplaceholder.typicode.com/users';
</script>Rufen Sie nun mithilfe der Fetch API die JSONPlaceholder API mit fetch() und der URL als Argument auf:
<script>
// ...
fetch(url)
</script>Sie rufen die Fetch API auf und übergeben die URL an die JSONPlaceholder API. Die Antwort wird empfangen. Diese Antwort ist jedoch kein JSON-Objekt, sondern ein Objekt mit verschiedenen Methoden, die Sie je nach gewünschter Weiterverarbeitung der Informationen verwenden können. Konvertieren Sie das zurückgegebene Objekt mithilfe der Methode `json()` in JSON.
Füge eine then()-Methode hinzu, die eine Funktion mit einem Parameter namens response enthält:
<script>
// ...
fetch(url)
.then((response) => {})
</script>Der Parameter „response“ nimmt den von fetch(url) zurückgegebenen Objektwert entgegen. Verwenden Sie die Methode json(), um die Antwort in JSON-Daten zu konvertieren:
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
</script>Die JSON-Daten müssen noch verarbeitet werden. Fügen Sie eine weitere `then()`-Anweisung mit einer Funktion hinzu, die ein Argument namens `data` entgegennimmt:
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {})
</script>Erstellen Sie in dieser Funktion eine Variable namens author, die auf die folgenden Daten gesetzt wird:
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
})
</script>Für jeden Autor in der Liste „authors“ soll ein Listenelement erstellt werden, das dessen Namen anzeigt. Die map()-Methode eignet sich für dieses Muster:
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
});
})
</script>Erstellen Sie in Ihrer map-Funktion eine Variable namens li, die mit createElement und dem HTML-Element li als Argument initialisiert wird. Erstellen Sie außerdem eine h2-Überschrift für den Namen und ein span-Element für die E-Mail-Adresse.
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
let li = document.createElement('li');
let name = document.createElement('h2');
let email = document.createElement('span');
});
})
</script>Das h2-Element enthält den Namen des Autors. Das span-Element enthält die E-Mail-Adresse des Autors. Das innerHTML-Attribut und die String-Interpolation ermöglichen dies:
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
let li = document.createElement('li');
let name = document.createElement('h2');
let email = document.createElement('span');
name.innerHTML = `${author.name}`;
email.innerHTML = `${author.email}`;
});
})
</script>Anschließend fügen Sie diese DOM-Elemente mit appendChild hinzu:
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
let li = document.createElement('li');
let name = document.createElement('h2');
let email = document.createElement('span');
name.innerHTML = `${author.name}`;
email.innerHTML = `${author.email}`;
li.appendChild(name);
li.appendChild(email);
list.appendChild(li);
});
})
ul.appendChild(list);
</script>Beachten Sie, dass jedes Listenelement der DocumentFragment-Liste hinzugefügt wird. Sobald die Zuordnung abgeschlossen ist, wird die Liste dem ungeordneten Listenelement ul hinzugefügt.
Nachdem die beiden `then()`-Funktionen implementiert sind, können Sie nun die `catch()`-Funktion hinzufügen. Diese Funktion protokolliert alle möglichen Fehler in der Konsole:
<script>
// ...
fetch(url)
.then((response) => {
// ...
})
.then((data) => {
// ...
})
.catch(function(error) {
console.log(error);
});
// ...
</script>Dies ist der vollständige Code für die von Ihnen erstellte Anfrage:
<h1>Authors</h1>
<ul id="authors"></ul>
<script>
const ul = document.getElementById('authors');
const list = document.createDocumentFragment();
const url = 'https://jsonplaceholder.typicode.com/users';
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
let li = document.createElement('li');
let name = document.createElement('h2');
let email = document.createElement('span');
name.innerHTML = `${author.name}`;
email.innerHTML = `${author.email}`;
li.appendChild(name);
li.appendChild(email);
list.appendChild(li);
});
}).
.catch(function(error) {
console.log(error);
});
ul.appendChild(list);
</script>Sie haben soeben erfolgreich eine GET-Anfrage mit der JSONPlaceholder-API und der Fetch-API gesendet. Als Nächstes werden Sie POST-Anfragen senden.
Schritt 3 – Bearbeitung von POST-Anfragen
Fetch verwendet standardmäßig GET-Anfragen, aber Sie können alle anderen Anfragetypen verwenden, Header ändern und Daten senden. Erstellen wir eine POST-Anfrage.
Fügen Sie zunächst eine Konstante hinzu, die den Link zur JSONPlaceholder-API enthält:
const url = 'https://jsonplaceholder.typicode.com/users';
Als Nächstes müssen Sie Ihr Objekt einrichten und es als zweites Argument an die fetch-Funktion übergeben. Es handelt sich dabei um ein Objekt namens „data“ mit dem Schlüsselnamen „Sammy“ (oder Ihrem Namen) und dem Wert:
// ...
let data = {
name: 'Sammy'
}Da es sich um eine POST-Anfrage handelt, müssen Sie dies explizit angeben. Erstellen Sie ein Objekt namens fetchData:
// ...
let fetchData = {
}Dieses Objekt sollte drei Schlüssel enthalten: Methode, Körper und Header:
// ...
let fetchData = {
method: 'POST',
body: JSON.stringify(data),
headers: new Headers({
'Content-Type': 'application/json; charset=UTF-8'
})
}Der Methodenschlüssel hat den Wert “POST”. Der Body wird auf das JSON.stringify-Format des neu erstellten Datenobjekts gesetzt. Die Header haben den Wert «Content-Type»: «application/json; charset=UTF-8“.
Die Headers-Schnittstelle ist ein Feature der Fetch API, mit dem Sie Aktionen an HTTP-Anfrage- und Antwortheadern durchführen können.
Durch Einfügen dieses Codes kann eine POST-Anfrage über die Fetch API gestellt werden. Sie fügen die URL, die abzurufenden Daten (fetchData) und die Argumente Ihrer Fetch-POST-Anfrage hinzu:
// ...
fetch(url, fetchData)Die Funktion then() enthält Code, der die von der JSONPlaceholder-API empfangene Antwort verarbeitet:
// ...
fetch(url, fetchData)
.then(function() {
// Handle response you get from the API
});Dies ist der vollständige Code für die von Ihnen erstellte Anfrage:
const url = 'https://jsonplaceholder.typicode.com/users';
let data = {
name: 'Sammy'
}
let fetchData = {
method: 'POST',
body: JSON.stringify(data),
headers: new Headers({
'Content-Type': 'application/json; charset=UTF-8'
})
}
fetch(url, fetchData)
.then(function() {
// Handle response you get from the API
});Sie können auch die Funktion fetch() an ein Request-Objekt übergeben.
const url = 'https://jsonplaceholder.typicode.com/users';
let data = {
name: 'Sammy'
}
let request = new Request(url, {
method: 'POST',
body: JSON.stringify(data),
headers: new Headers({
'Content-Type': 'application/json; charset=UTF-8'
})
});
fetch(request)
.then(function() {
// Handle response you get from the API
});Mit diesem Ansatz kann die Anfrage als einziges Argument für fetch() verwendet werden und ersetzt url und fetchData.
Sie kennen nun zwei Möglichkeiten, POST-Anfragen mit der Fetch API zu erstellen und auszuführen.
Ergebnis
Obwohl die Fetch API noch nicht von allen Browsern unterstützt wird, ist sie eine hervorragende Alternative zu XMLHttpRequest.
