JavaScript - Fetch API: Ein Anfängerleitfaden

Hallo, ambitionierte Programmierer! Heute machen wir uns auf eine aufregende Reise in die Welt der Fetch API von JavaScript. Machen Sie sich keine Sorgen, wenn Sie neu im Programmieren sind – ich werde Ihr freundlicher Guide sein und alles Schritt für Schritt erklären. Also, holen Sie sich eine Tasse Kaffee (oder Tee, wenn das Ihr Ding ist) und tauchen wir ein!

Was ist die Fetch API?

Stellen Sie sich vor, Sie sind in einem Restaurant und möchten Ihr liebstes Gericht bestellen. Sie rufen den Kellner (das sind Sie, der eine Anfrage stellt), der geht in die Küche (das ist der Server) und bringt Ihr leckeres Gericht zurück (das ist die Antwort). Die Fetch API funktioniert auf ähnliche Weise, aber anstatt von Essen geht es um Daten!

Die Fetch API ist eine moderne Schnittstelle, die es Ihnen ermöglicht, Netzwerkanfragen von Browsern an Server zu senden. Es ist wie ein Bote, der Anfragen an einen Server senden und die benötigten Daten zurückbringen kann.

Sehen wir uns ein einfaches Beispiel an:

fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Fehler:', error));

Machen Sie sich keine Sorgen, wenn das verwirrend aussieht – wir werden das gleich auseinandernehmen!

Behandlung der Fetch() API-Antwort mit 'then...catch' Block

Nun tauchen wir tiefer ein, wie wir die Antwort auf eine Fetch-Anfrage behandeln. Wir verwenden etwas, das als 'then...catch' Block bezeichnet wird. Stellen Sie es sich als eine Anleitung vor, was zu tun ist, wenn der Kellner Ihre Bestellung zurückbringt (oder sie unterwegs fallen lässt!).

fetch('https://api.example.com/users')
.then(response => {
if (!response.ok) {
throw new Error('Netzwerkanwort war nicht in Ordnung');
}
return response.json();
})
.then(data => {
console.log('Benutzerdaten:', data);
})
.catch(error => {
console.error('Es gab ein Problem mit der Fetch-Operation:', error);
});

Lassen Sie uns das auseinandernehmen:

1. Wir starten mit dem Aufruf von fetch() mit der URL, von der wir Daten abrufen möchten.
2. Der erste .then() überprüft, ob die Antwort in Ordnung ist. Wenn nicht, wirft er einen Fehler.
3. Wenn die Antwort in Ordnung ist, konvertieren wir sie in das JSON-Format.
4. Der zweite .then() empfängt die JSON-Daten und protokolliert sie in der Konsole.
5. Wenn etwas an irgendeinem Punkt schiefgeht, wird der .catch()-Block den Fehler behandeln.

Behandlung der Fetch() API-Antwort asynchron

Manchmal möchten wir, dass unser Code wartet, bis die Fetch-Operation abgeschlossen ist, bevor er weitergeht. Hier kommt async/await ins Spiel. Es ist wie dem Kellner zu sagen: "Ich warte hier, bis meine Bestellung fertig ist."

async function fetchUsers() {
try {
const response = await fetch('https://api.example.com/users');
if (!response.ok) {
throw new Error('Netzwerkanwort war nicht in Ordnung');
}
const data = await response.json();
console.log('Benutzerdaten:', data);
} catch (error) {
console.error('Es gab ein Problem mit der Fetch-Operation:', error);
}
}

fetchUsers();

In diesem Beispiel:

1. Wir definieren eine async-Funktion namens fetchUsers.
2. Innerhalb der Funktion verwenden wir await, um auf die abgeschlossene Fetch-Operation zu warten.
3. Wir warten dann darauf, dass die Antwort in JSON konvertiert wird.
4. Wenn ein Fehler auftritt, wird er im catch-Block erwischt.

Optionen mit der Fetch() API

Die Fetch API ist nicht nur zum Abrufen von Daten da – Sie können Ihre Anfragen auch anpassen! Es ist wie das genaue Anweisen, wie Ihr Gericht im Restaurant zubereitet werden soll.

Hier ist eine Tabelle mit einigen häufigen Optionen, die Sie mit fetch verwenden können:

Option	Beschreibung	Beispiel
method	Das HTTP-Verfahren (GET, POST, etc.)	method: 'POST'
headers	Jegliche Header, die Sie zu Ihrer Anfrage hinzufügen möchten	headers: { 'Content-Type': 'application/json' }
body	Jegliche Daten, die Sie mit der Anfrage senden möchten	body: JSON.stringify({ name: 'John' })
mode	Der Modus, den Sie für die Anfrage verwenden möchten	mode: 'cors'

Sehen wir uns ein Beispiel mit einigen dieser Optionen an:

fetch('https://api.example.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
name: 'John Doe',
email: '[email protected]'
})
})
.then(response => response.json())
.then(data => console.log('Erfolg:', data))
.catch(error => console.error('Fehler:', error));

In diesem Beispiel senden wir eine POST-Anfrage mit einigen Benutzerdaten. Es ist wie das Platzieren einer benutzerdefinierten Bestellung in unserem imaginären Restaurant!

Vorteile der Verwendung der Fetch() API

Nun, da wir die Fetch API erkundet haben, fragen Sie sich vielleicht, "Warum sollte ich das instead von anderen Methoden verwenden?" Nun, lassen Sie mich Ihnen von einigen großartigen Vorteilen erzählen:

1. Einfachheit: Fetch ist in moderne Browser integriert, sodass Sie keine externen Bibliotheken einbinden müssen.

2. Promise-basiert: Fetch gibt Promises zurück, was die Handhabung asynchroner Operationen erleichtert.

3. Flexibel: Sie können Ihre Anfragen mit verschiedenen Optionen einfach anpassen.

4. Modern: Es ist die modernere Methode im Vergleich zu älteren Methoden wie XMLHttpRequest.

5. Konsistent: Es bietet eine konsistente Methode zum Senden von Netzwerkanfragen across verschiedenen Browsern.

Hier ist ein schnelles Beispiel, das diese Vorteile zeigt:

async function fetchData(url) {
try {
const response = await fetch(url);
const data = await response.json();
return data;
} catch (error) {
console.error('Fehler beim Abrufen von Daten:', error);
}
}

fetchData('https://api.example.com/data')
.then(data => console.log('Abgerufene Daten:', data));

Diese einfache Funktion kann wiederverwendet werden, um Daten von jeder URL abzurufen, was die Einfachheit und Flexibilität der Fetch API zeigt.

Und das war's, Leute! Wir haben die Welt der Fetch API durchwandert, von der Verständigung, über die Behandlung von Antworten, die Verwendung von Optionen bis hin zu den Vorteilen. Denken Sie daran, dass wie jede Fähigkeit das Beherrschen der Fetch API Übung erfordert. Also experimentieren Sie nicht und probieren Sie verschiedene Anfragen aus.

Frohes Coden und möge Ihre Fetch-Anfragen immer die Daten zurückbringen, die Sie suchen!

Credits: Image by storyset