Die Fetch-API stellt die neue offiziell unterstützte Methode dar, HTTP-Anfragen auszuführen und lokale Ressourcen in Node.js abzurufen. Das bedeutet, dass Sie in Ihrem Projekt keine externen HTTP-Client-Abhängigkeiten mehr benötigen. Sie müssen lediglich lernen, wie Sie die Node-Fetch-API nutzen können, und genau darum geht es in diesem Handbuch.
Hier erfahren Sie Folgendes:
- Was ist die Fetch-API
- Erste Schritte mit der Node-Fetch-API
- HTTP-Anfragen in Node.js mit der Fetch-API erstellen
- Zusätzliche Optionen und Funktionen
Legen wir also los!
Was ist die Fetch-API?
Die Fetch-API ist eine JavaScript-Schnittstelle zum Abrufen von Ressourcen auf lokaler Ebene oder über ein Netzwerk. Genauer gesagt bietet es eine globale fetch()-Funktion, die das Ausführen asynchroner HTTP-Anfragen erleichtert. Dieselbe Methode kann auch zum Abrufen lokaler Dateien verwendet werden. Die JavaScript-Fetch-API ist ein flexibler Ersatz für die alte XMLHttpRequest-API.
Diese fetch()-Methode beruht auf der Verwendung der Request- und Response-Objekte. Es erfordert nur ein obligatorisches Argument, nämlich den lokalen Pfad oder die URL zu der gewünschten Ressource, die Sie abrufen möchten. Darüber hinaus akzeptiert es auch einige weitere Optionen, darunter CORS, HTTP-Header und Caching-Einstellungen. Als asynchrone Methode gibt fetch() ein Promise zurück, das die vom Server erzeugte Antwort auflöst. Dies wird durch ein Response -Objekt dargestellt, das mehrere Methoden für den Zugriff und die Analyse seines Inhaltstextes zur Verfügung stellt.
Ein einfacher Fetch-API-Aufruf sieht folgendermaßen aus:
fetch("https://httpbin.io/ip", {
// optional configs...
}).then((response) => {
// print the JSON response body
console.log(response.json()) // { "origin": "<YOUR_IP_ADDRESS>" }
})
Or if you prefer the equivalent async/await syntax, you can write:
const response = await fetch("https://httpbin.io/ip", {
// optional configs...
})
// print the JSON response body
console.log(await response.json()) // { "origin": "<YOUR_IP_ADDRESS>" }
Erste Schritte mit der Node-Fetch-API
Die Fetch-API wird seit Jahren von den wichtigsten Browsern unterstützt. Sie ist jedoch erst seit Version 18.0.0, veröffentlicht im April 2022, Teil der Standardbibliothek Node.js. Die Node-Fetch-API basiert insbesondere auf der Implementierung von undici.
Vor der Einführung von Node.js 18 konnten Sie fetch() als experimentelle Funktion aktivieren oder mithilfe der npm-Bibliothek node-fetch, einer weiteren beliebten Fetch-API-Implementierung, verwenden. Nachdem fetch() nun Teil der offiziellen Node.js-Standardbibliothek ist, können Sie die Funktion direkt in Ihrem Code einsetzen, ohne sie importieren zu müssen. Alles was Sie tun müssen, ist die fetch()-Methode mit der folgenden Syntax aufzurufen:
fetch (URL, Optionen)
Die URL ist erforderlich und kann Folgendes enthalten:
- Der Pfad zu einer lokalen Ressource (z. B. movies.json)
- Die URL zu einem Remote-Endpunkt oder einer Remote-Ressource (z. B. https://httpbin.io/ip oder https://example.com/movies.json)
options ist stattdessen ein optionales Objekt, das folgende optionale Felder akzeptieren kann:
- Methode: Die HTTP-Methode der Anfrage, z. B. „GET“, „POST“, „PUT“, „PATCH“ und „DELETE“. Die Standardeinstellung ist „GET“.
- Header: Ein Header- oder Objektliteral, das die HTTP-Header enthält, die Ihrer Anfrage hinzugefügt werden sollen. Standardmäßig ist kein „Header“ eingestellt.
- Textkörper: Das Objekt mit den Daten, die als Textkörper Ihrer Anfrage verwendet werden sollen. Beachten Sie, dass „GET“- und „HEAD“-Anfragen keinen Textkörper haben können.
- Modus: Der für die Anfrage zu verwendende Modus (z. B. „cors“, „no-cors“, „same-origin“, „navigate“ oder „websocket“). Standardmäßig ist es auf „cors“ eingestellt.
- Anmeldeinformationen: Um festzulegen, ob der Browser die Anmeldeinformationen senden soll oder nicht. Es muss eine der folgenden Zeichenketten sein: „omit“, „same-origin“ oder „include“.
- Redirect: Um festzulegen, wie eine HTTP-Umleitungsantwort verarbeitet werden soll. Es kann „follow“, „error“ oder „manual“ sein. Standardmäßig ist es auf „follow“ eingestellt.
- Referrer: Eine Zeichenfolge, die den Referrer der Anfrage enthält. Standardmäßig ist es eine leere Zeichenfolge.
- ReferrerPolicy: Gibt die Referrer-Richtlinie an, die für die Anfrage verwendet werden soll.
- Signal: Eine AbortSignal-Objektinstanz, mit der Sie die Anfrage über die AbortController-Schnittstelle abbrechen können.
- Priority: Eine Zeichenfolge, die die Priorität der aktuellen Fetch-Anfrage relativ zu anderen Anfragen desselben Typs angibt. Es akzeptiert „hoch“, „niedrig“ oder „automatisch“. Standardmäßig ist „auto“ eingestellt.
Lesen Sie den Abschnitt über die fetch()-Parameter aus der offiziellen Dokumentation, um mehr zu erfahren.
Hier ein Beispiel für eine Node.js Fetch-Anfrage mit einem Options-Objekt:
const response = await fetch("https://your-domain.com/api/v1/users", {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
username: "jane-doe",
email: "[email protected]"
role: "superuser",
age: 23,
birthplace: "New York",
}),
})
Beachten Sie, dass die Textdaten mit dem Content-Type-Header übereinstimmen müssen.
HTTP-Anfragen in Node.js mit der Fetch-API erstellen
Sehen wir uns nun die Node-Fetch API in realen Anfragebeispielen für die gängigsten HTTP-Methoden in Aktion an.
GET
So können Sie eine „GET“-Anfrage mit der Fetch-API durchführen:
const response = await fetch("https://your-domain.com/your-endpoint")Wie man sehen kann, wird nur eine Codezeile benötigt. Das liegt daran, dass fetch() standardmäßig GET-Anfragen ausführt.
Anschließend können Sie mit einer der folgenden Methoden auf den Inhalt der Antwort zugreifen:
- response.text(): Gibt ein Promise zurück, das mit dem Antworttext als Text aufgelöst wird.
- response.json(): Gibt ein Promise zurück, das mit einem aus der JSON-Antwort analysierten Objekt aufgelöst wird.
- response.blob(): Gibt ein Promise zurück, das mit dem Antworttext als Blob-Objekt aufgelöst wird.
- response.ArrayBuffer(): Gibt ein Promise zurück, das mit dem Antworttext als ArrayBuffer-Instanz aufgelöst wird.
- response.formData(): Gibt ein Promise zurück, das mit dem Antworttext als FormData-Objekt aufgelöst wird.
Der Code eines vollständigen Beispiels wäre also:
const response = await fetch("https://httpbin.io/ip")
const jsonResponseContent = await response.json() // { "origin": "<YOUR_IP_ADDRESS>" }
const origin = jsonResponseContent.origin // <YOUR_IP_ADDRESS>Wenn die vom Server zurückgegebene Antwort nicht im JSON-Format ist, schlägt die Anweisung response.json() mit einem SyntaxError fehl.
POST
Das Erstellen einer POST-Anfrage mit einem Node-Fetch-API-Aufruf dauert nur wenige Zeilen:
const formData = new FormData()
formData.append("username", "serena-smith")
formData.append("email", "[email protected]")
const response = await fetch("https://example.com/api/v1/users", {
method: "POST",
body: formData,
})Der Schlüssel zum Senden einer POST-Anfrage mit fetch() ist die Angabe der an den Server zu sendenden Daten in der „Body“-Option. Dies kann in verschiedenen Formaten erfolgen, einschließlich „JSON“, „FormData“ und „Text“. Wenn Sie ein FormData-Objekt senden, müssen Sie keinen Content-Type-Header angeben. Andernfalls ist es erforderlich.
PUT
Die Ausführung einer PUT-Anfrage mit der Fetch-API ist genau wie eine POST-Anfrage:
const response = await fetch("https://example.com/api/v1/users", {
method: "PUT",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
username: "john-doe",
email: "[email protected]"
role: "regular-user",
age: 47,
birthplace: "Chicago",
}),
})
Der einzige Unterschied ist, dass man „PUT“ als Methodeneinstellung angeben muss. In ähnlicher Weise können Sie eine PATCH-Anfrage senden, indem Sie die Option „PATCH“ einstellen.
DELETE
Hier ist ein Beispiel für eine HTTP-DELETE-Anfrage mit fetch ():
const response = await fetch("https://example.com/api/v1/users/45", {
method: "DELETE",
})Auch hier kommt es darauf an, die richtige HTTP-Methode einzustellen. Die Fetch-API-Implementierung erledigt den Rest.
Zusätzliche Optionen und Funktionen
Nun, da Sie wissen, wie Sie fetch() in allgemeinen Szenarien einsetzen können, sind Sie bereit, die erweiterten Optionen der Node-Fetch-API zu erkunden.
Kopfzeilen einstellen
Mitfetch() können Sie die HTTP-Header Ihrer Anfrage über das Header-Feld des Options-Objekts anpassen. Headers akzeptiert insbesondere ein Headers-Objekt oder ein Objektliteral mit bestimmten Zeichenkettenwerten.
Nehmen wir an, Sie möchten die Header für Content-Type und User-Agent in Ihrer fetch()-Anfrage setzen. Hierzu können Sie wie folgt ein Headers-Objekt verwenden:
const customHeaders = new Headers()
customHeaders.append("Content-Type", "application/json")
customHeaders.append("User-Agent", "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36")
const response = fetch("https://your-domain.com/your-endpoint", {
headers: customHeaders,
// other options...
})Andernfalls könnten Sie sie äquivalent mit einem Objektliteral setzen:
const response = fetch("https://your-domain.com/your-endpoint", {
headers: {
"Content-Type": "application/json",
"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36",
},
// other options...
})Diese Syntax ist kompakter und einfacher zu lesen.
Lesen der Header
Wenn Sie die vom Server in der Antwort gesetzten HTTP-Header lesen möchten, können Sie wie folgt darauf zugreifen:
const response = await fetch("https://your-domain.com/your-endpoint", {
// optional configs...
})
// accessing the "Content-Type" response header
const responseHeaders = response.headers
const responseContentType = response.headers.get("Content-Type")Das Feld response.headers gibt ein Header-Objekt zurück, von dem aus Sie mit der Methode get() auf bestimmte Header zugreifen können.
Fehlerbehandlung der Node-Fetch-API
Ein Node.js Fetch-API-Aufruf kann nur aus zwei Gründen fehlschlagen:
- Eine AbortError Ausnahme: Die Anfrage wurde absichtlich von einem AbortController abgebrochen.
- Eine TypeError-Ausnahme: Dies kann aus verschiedenen Gründen auftreten, z. B. ein ungültiger Header-Name, eine ungültige URL oder ein allgemeiner Netzwerkfehler. Weitere Ursachen finden Sie in den Dokumenten.
Es ist wichtig zu verstehen, dass jede 4xx- oder 5xx-Antwort als erfolgreiche Anfrage für die Fetch-API betrachtet wird. Anders ausgedrückt: Eine vom Server erzeugte Fehlerantwort löst keinen JavaScript-Fehler aus. Dieses Verhalten ist darauf zurückzuführen, dass fetch() die Anfrage gestellt und der Server eine Antwort übermittelt hat. Aus der Sicht des Netzwerks kann dies nicht als Fehler gewertet werden. Letztendlich wurde die Anfrage erfolgreich beendet.
Das bedeutet, dass Sie stets prüfen sollten, ob eine erfolgreiche Antwort vorliegt, bevor Sie die vom Server zurückgesandten Daten bearbeiten. Dazu können Sie die nachstehende Fehlerbehandlungslogik implementieren:
try {
const response = await fetch("https://your-domain.com/your-endpoint", {
// optional configs...
})
if (response.ok) {
// use the data returned by the server...
// e.g.,
// await response.json()
} else {
// handle 4xx and 5xx errors...
}
} catch (error) {
// handle network or abort errors...
}
Beachten Sie, dass die Eigenschaft „ok“ von Response nur dann „true“ enthält, wenn die Anfrage erfolgreich war.
Abbruch einer Abrufanfrage
Die Fetch-API unterstützt den Abbruch von bereits eingeleiteten Anfragen durch die AbortController-API.
Um eine bestehende fetch()-Anfrage abzubrechen, muss zunächst ein Signalobjekt erzeugt werden (siehe unten):
const controller = new AbortController()
const signal = controller.signal
Then, specify it in the options object of your request:
const response = await fetch("https://your-domain.com/your-endpoint", {
signal: signal,
// other configs...
})Wenn Sie nun die folgende Anweisung aufrufen, wird Ihre Anfrage durch einen AbortError unterbrochen:
controller.abort()Beachten Sie, dass der Server die Anfrage möglicherweise bereits erhalten hat. In diesem Fall führt der Server die Anfrage trotzdem aus, doch die Antwort wird von Node.js ignoriert.
Herzlichen Glückwunsch! Sie sind jetzt ein Node.js Fetch-API-Meister!
Fazit
In diesem Artikel haben Sie erfahren, was die Fetch-API ist und wie Sie diese in Node.js verwenden können. Im Einzelnen haben Sie mit den Grundlagen von fetch() begonnen und sich anschließend in die erweiterten Optionen und Funktionen vertieft. Mit einem so leistungsstarken HTTP-Client wird das Abrufen von Online-Daten einfach. Damit können Sie beispielsweise unsere SERP-API-Endpunkte aufrufen und mit dem Scraping von SERP-Daten beginnen.
Bright Data ist die weltgrößte Webdaten-Plattform und betreut über 20.000 Unternehmen rund um den Globus. Sprechen Sie mit einem unserer Datenexperten, um das richtige Produkt für Sie und Ihre Web-Scraping-Anforderungen zu finden.
