Lernen Sie, wie Sie Node-Fetch NPM verwenden, um HTTP-Anfragen in Node.js zu stellen

Sorin-Gabriel Marica am 07. Dezember 2022

Das Erstellen von HTTP-Anfragen ist eine der wichtigsten Funktionen jeder modernen Programmiersprache. Node.js ist keine Ausnahme von dieser Regel, aber bis jetzt war diese Funktion in den Händen von viel zu vielen npm-Paketen, die es da draußen gibt. Node-Fetch bietet eine Alternative dazu, indem es die ursprüngliche Fetch-API verwendet, die derzeit von den meisten Browsern unterstützt wird.

Einführung in die Node-Fetch API

Bevor ich Ihnen von der Node-Fetch-API erzähle, muss ich Ihnen kurz erklären, was eine HTTP-Anfrage ist. Der Zweck einer HTTP-Anfrage besteht darin, Informationen von URLs im gesamten Internet abzurufen. Ein einfaches Beispiel für eine HTTP-Anfrage ist der Zugriff auf eine Website.

Während vor langer Zeit HTTP-Anfragen mit XMLHttpRequest- oder XHR-Objekten durchgeführt wurden, unterstützen heute alle modernen Browser die Fetch-API von Javascript. Dies erlaubt es Programmierern, die Anfragen mit einer viel einfacheren und saubereren Syntax zu erstellen. Allerdings fehlte die Fetch-API lange Zeit in der serverseitigen Sprache von Node.JS, so dass Platz für andere maßgeschneiderte Pakete blieb, die sich um diese Funktion kümmerten, wie z.B.: Axios, GOT und viele andere.

Node-Fetch ist die Entsprechung der Fetch-API von Javascript, und jetzt ist sie endlich auch in Node.JS verfügbar.

Voraussetzungen für die Verwendung von Node-Fetch API

Da dies ein Node.JS-Tutorial ist, müssen Sie natürlich Node.JS installiert haben. Wenn Sie es noch nicht haben, können Sie es über diesen Link herunterladen und installieren.

Node.js hat experimentelle Unterstützung für die Fetch-API erst mit der Version 17.5 freigegeben. Sie benötigen also mindestens die Node-Version 17.5. Außerdem müssen Sie die Option -experimental-fetch Flagge verwenden, wenn Sie Ihre Skripte ausführen.

Wenn Sie eine niedrigere Version von Node.JS haben, können Sie das n-Paket verwenden, um auf die neueste Version zu wechseln. N ist ein npmjs-Paket, dessen einziger Zweck es ist, den Wechsel zwischen Node- und npm-Versionen zu ermöglichen. Um es zu installieren und auf die neueste Version zu wechseln, folgen Sie diesen Schritten:

npm install -g n
n latest

Die n letzte Befehl wird die neueste Version von Node.js installiert. Um Ihre Node.js-Version zu überprüfen, führen Sie einfach diesen Befehl aus:

Knoten -Version

Wie man Node-Fetch verwendet

Eine HTTP-Anfrage in einer beliebigen Programmiersprache ist eine asynchrone Operation, da der Empfang der Antwort auf die Anfrage Zeit in Anspruch nimmt. Es gibt zwei Möglichkeiten, wie Sie asynchrone Operationen nutzen können. Sie können entweder auf die Antwort warten und dann mit Ihrem Code fortfahren oder Ihren Code parallel ausführen.

Node-Fetch unterstützt sowohl synchrone als auch asynchrone Funktionsaufrufe.

GET-Anfragen in Node-Fetch

Um eine einfache get-Anfrage zu stellen und den Body aus der Antwort zu extrahieren, können Sie den folgenden Code verwenden:

fetch('https://www.webscrapingapi.com/')

    .then((response) => response.text())

    .then((body) => {

        console.log(body);

    });

Um diesen Code auszuführen, sollten Sie ihn in einer Datei mit dem Namen node-fetch-example.js speichern und ihn mit diesem Befehl aus demselben Ordner ausführen: node --experimental-fetch node-fetch-example.js. Beachten Sie, dass Sie beim Ausführen eine Warnung erhalten, die besagt, dass die Fetch-API eine experimentelle Funktion ist. Dies ist normal, da es sich zum Zeitpunkt der Erstellung dieses Artikels um eine experimentelle Funktion handelt.

Der vorherige Code wartet nicht auf das Ende der Anfrage, bevor er seine Ausführung fortsetzt. Das bedeutet, dass jeder darunter liegende Code sofort mit der Ausführung beginnt, ohne auf das Ende des Abrufs zu warten. Wenn Sie zum Beispiel Folgendes einfügen würden console.log("Etwas"); unterhalb des Codes einfügen, sieht die Ausgabe bei der Ausführung des Skripts wie folgt aus:

Zur weiteren Erläuterung des obigen Codes fällt Ihnen vielleicht auf, dass wir die Funktion "then" zweimal verwenden. Die erste "then"-Funktion wird ausgeführt, wenn wir eine Antwort von der HTTP-Anfrage erhalten, und sie bildet diese Antwort mit dem Inhalt der Datei response.text() Methode (die den Textkörper der Antwort zurückgibt). Aber, die response.text() Methode ist jedoch ebenfalls asynchron und daher müssen wir im zweiten "then" auf ihre Antwort warten, wobei body dem Ergebnis des response.text()-Versprechens entspricht.

Sie können die Fetch-API auch mit await aufrufen, wie in dem folgenden Beispiel geschehen:

(async () => {

    const response = await fetch('https://webscrapingapi.com');

    const body = await response.text();

    console.log(body);

})();

Hier wird noch besser erklärt, wie die Fetch-API funktioniert und auf welche Versprechen man warten muss. Im weiteren Verlauf dieses Artikels werden wir die Fetch-API mit await verwenden, da wir so eine sauberere Syntax für den Code beibehalten können.

Kopfzeilen an die Anfrage senden

Eine weitere Funktion, die Sie beim Senden von Anfragen benötigen, ist die Möglichkeit, die Kopfzeilen der Anfrage zu setzen. Dazu können Sie die Kopfzeilen in den zweiten Parameter der Abruf-API einfügen, etwa so:

(async () => {

    const response = await fetch('http://httpbin.org/headers', {

        headers: {

            'my-custom-header': 'my-header-value'

        }

    });

    const body = await response.text();

    console.log(body);

})();

Neben den Kopfzeilen gibt es noch viele weitere Optionen, die Sie im zweiten Parameter der Fetch-API senden können. Um sie alle zu sehen, lesen Sie die Dokumentation der Fetch-API (die clientseitig verwendet wird).

POST-Anfragen in Node-Fetch

Eine weitere wichtige Option der Fetch-API ist die Option method. Diese gibt die Methode an, die Sie für die HTTP-Anfrage verwenden. Es gibt 5 Methoden, die Sie verwenden können: GET, POST, PUT, PATCH und DELETE, wobei die ersten beiden am häufigsten verwendet werden (GET und POST). Wenn keine Methode angegeben wird, verwendet Node-Fetch standardmäßig GET.

Um eine POST-Anfrage mit Node-Fetch zu stellen, können Sie dieses Codeschnipsel verwenden:

(async () => {

    const response = await fetch('http://httpbin.org/post', {

        method: 'POST',

        body: JSON.stringify({

            'key': 'value'

        })

    });

    const body = await response.text();

    console.log(body);

})();

Sie werden feststellen, dass wir JSON.stringify verwenden, um den Body der Anfrage zu senden. Das liegt daran, dass die Fetch-Api den Body als String und nicht als Objekt sendet, wie es andere Pakete wie Axios tun.

Die Fetch-API deckt auch alle anderen Anforderungsmethoden ab.

Fehlerbehandlung in Node-Fetch

Die Behandlung von Fehlern bei HTTP-Anfragen ist ein Muss, da man sich nie darauf verlassen kann, dass ein Drittanbieterdienst immer verfügbar ist. Als beste Praxis sollten Sie immer mit Fehlern umgehen, um zu verhindern, dass Ihre Anwendung oder Ihr Skript zusammen mit der URL, an die Sie die Anfrage stellen, untergeht.

Die Fehlerbehandlung in node-fetch kann erfolgen, indem der Code mit einer einfachen try catch-Syntax umgeben wird. Hier ist ein Beispiel dafür, wie man das bei der Verwendung von await macht:

(async () => {

    try {

        const response = await fetch('[INVALID_URL]');

        const responseBody = await response.text();

    } catch (error) {

        console.log(error.message);

    }

})();

Wenn Sie stattdessen lieber fetch ohne await verwenden möchten, können Sie Ihrem Code eine catch-Funktion wie die folgende hinzufügen:

fetch('[INVALID_URL]')

    .then((response) => response.text())

    .then((body) => {

        console.log(body);

    })

    .catch((error) => {

        console.log(error.message);

    });

Anwendungsfälle für Node-Fetch

HTTP-Anfragen können in vielerlei Hinsicht nützlich sein, da sie es ermöglichen, neue Informationen von verschiedenen Diensten zu erhalten und Daten auf elegante und einfache Weise zu extrahieren. Dafür gibt es einige Anwendungsfälle, die wir in den folgenden Abschnitten untersuchen werden.

Node-Fetch für API-Anfragen verwenden

Beim Programmieren kann es vorkommen, dass Sie eine API verwenden müssen. Der Grund dafür ist, dass Sie möglicherweise bestimmte Daten aus einer anderen Backend-Quelle abrufen und diese dann verarbeiten oder aktualisieren müssen. Ein gutes Beispiel hierfür wäre eine API mit 4 Endpunkten, die es Ihnen ermöglicht, Benutzer in einer Backend-Datenbank von einem anderen Server aus zu erstellen, zu lesen, zu aktualisieren und zu löschen (CRUD-Operationen).

Oft muss eine solche API authentifiziert werden, um zu verhindern, dass unbefugte Quellen sie nutzen und die Daten zu ihrem Vorteil verändern. Für HTTP-Anfragen gibt es viele Methoden zur Authentifizierung. Eine der gebräuchlichsten ist die Verwendung eines API-Schlüssels, wobei der API-Anbieter Ihnen einen Schlüssel gibt, den nur Sie kennen sollten, und die Endpunkte der API nur funktionieren, wenn der richtige Schlüssel gesendet wird.

Eine weitere Methode, mit der eine API geschützt werden kann, ist die einfache Authentifizierung. Dies bedeutet, dass Sie für den Zugriff auf die API eine Kopfzeile mit einer base64-kodierten Zeichenfolge des Formats "Benutzername:Passwort" senden müssen. Das folgende Beispiel zeigt, wie Sie die Basisauthentifizierung in einer POST-Anfrage verwenden können:

(async () => {

    const response = await fetch('http://httpbin.org/post', {

        method: 'POST',

        headers: {

            "Authorization": `Basic ${btoa('login:password')}`

        },

        body: JSON.stringify({

            'key': 'value'

        })

    });

    const body = await response.text();

    console.log(body);

})();

Node-Fetch für Web Scraping verwenden

Web Scraping ist eine Methode, um Inhalte von Websites zu erhalten und zu analysieren, so dass nur die benötigten Daten erhalten bleiben, die Sie nach Belieben verwenden können. Eine gute npmjs-Bibliothek, die Sie verwenden können, um das Parsen der Daten zu erleichtern, ist cheerio. Mit dieser Bibliothek können Sie statische HTML-Daten, die Sie über die Fetch-Api erhalten haben, auf die gleiche Weise abfragen, wie Sie sie mit Javascript oder Jquery abfragen würden.

Hier ein Beispiel, wie man den Titel einer Seite mit der fetch API und cheerio abrufen kann:

const cheerio = require("cheerio");

(async () => {

    const response = await fetch('https://www.webscrapingapi.com/');

    const responseBody = await response.text();

    const $ = cheerio.load(responseBody);

    console.log($('title').first().text());

})();

Das obige Beispiel sollte "WebScrapingAPI | All-In-One Scraping API" zurückgeben, da dies der Titel der Seite ist (der Text, der oben im Fenster Ihres Browsers steht). Um es aufzuschlüsseln, verwenden wir fetch, um den HTML-Seitenquelltext von https://www.webscrapingapi.com/ zu erhalten, und wir verwenden cheerio, um diesen Inhalt zu analysieren. Um mehr über Cheerio zu erfahren, können Sie sich die Dokumentation hier ansehen 

Das Scraping von Informationen aus anderen Websites kann in vielerlei Hinsicht nützlich sein. Zum Beispiel können gescrapte Informationen verwendet werden, um einen Trainingsdatensatz für ein maschinelles Lernmodell zu erstellen oder um ein Preisvergleichs-Tool zu entwickeln, das Daten aus vielen Quellen extrahiert und diese dann vergleicht.

Während das obige Beispiel gut funktioniert, ist die fetch api nicht immer die beste Option, wenn es um Scraping geht. Das liegt daran, dass moderne Websites heutzutage ihre Inhalte über Javascript anzeigen und Captchas oder andere Methoden verwenden, um zu verhindern, dass ihre Daten abgegriffen werden. Die Fetch-API funktioniert wie ein einfaches CURL an die angegebene URL und ruft den statischen Inhalt ab, den die Seite beim Laden anzeigt, ganz ohne Javascript-Rendering.

Um Daten zu scrapen und gleichzeitig den Javascript-Code auf der Seite auszuführen, sollten Sie sich Alternativen wie Puppeteer ansehen, wie in diesem Artikel über fortgeschrittenes Scraping beschrieben. Wenn Sie sich diese ganze Mühe ersparen wollen, können Sie WebScrapingAPI verwenden, eine API, die speziell für diese Aufgabe entwickelt wurde und sich um all diese Probleme kümmert (einschließlich Antibot-Erkennung) und mit einer kostenlosen Testversion mit allen Funktionen geliefert wird. 

Zusammenfassung

Zusammenfassend ist die gute Nachricht, dass die lang erwartete Fetch-Api endlich in node.js verfügbar ist, auch wenn sie sich (zum Zeitpunkt des Schreibens dieses Artikels) noch im experimentellen Stadium befindet. Während es vorher möglich war, Anfragen in node.js zu stellen, war der einzige Weg, dies zu tun, entweder über die XMLHttpRequest/XHR-Objekte oder eines der vielen Pakete wie Axios oder GOT.

Mit dieser Änderung werden sich clientseitiges Javascript und serverseitiges Nodejs stärker angleichen, da diese Funktion bereits verfügbar war und von allen modernen Browsern auf dem clientseitigen Javascript unterstützt wurde.

HTTP-Anfragen können in vielerlei Hinsicht nützlich sein, z. B. bei der Verwendung einer API oder beim Auslesen von Daten von einer Website. Während die anderen npm-Pakete eine Option bleiben und weiterhin für ältere Projekte verwendet werden, ist die Verwendung von fetch die beste Lösung für die Zukunft. Dies wird die Lesbarkeit von Nodejs-Code verbessern und den Wechsel vom Frontend zum Backend noch einfacher machen.