Apprendre à utiliser Node-Fetch NPM pour effectuer des requêtes HTTP dans Node.js

Sorin-Gabriel Marica le 07 décembre 2022

Faire des requêtes HTTP est l'une des fonctionnalités les plus importantes de tout langage de programmation moderne. Node.js ne fait pas exception à cette règle, mais jusqu'à présent, cette fonctionnalité était entre les mains de beaucoup trop de paquets npm. Node-Fetch offre une alternative à cela, en utilisant l'API fetch originale qui est actuellement supportée par la plupart des navigateurs.

Introduction à l'API Node-Fetch

Avant de commencer à vous parler de l'API Node-Fetch, je dois vous donner une brève information sur ce qu'est une requête HTTP. L'objectif d'une requête HTTP est de récupérer des informations à partir d'URL sur l'ensemble de l'internet. Un exemple simple de requête HTTP est l'accès à un site web.

Alors qu'il y a longtemps, les requêtes HTTP étaient effectuées à l'aide d'objets XMLHttpRequest ou XHR, aujourd'hui, tous les navigateurs modernes prennent en charge l'API Fetch en javascript. Cela permet aux programmeurs de faire des requêtes avec une syntaxe beaucoup plus simple et plus propre. Cependant, l'API Fetch a longtemps été absente du langage côté serveur de Node.JS, laissant la place à d'autres packages personnalisés pour prendre en charge cette fonctionnalité, tels que : Axios, GOT et bien d'autres.

Node-Fetch est l'équivalent de l'API Fetch de javascript, et maintenant il est enfin disponible dans Node.JS aussi.

Conditions préalables à l'utilisation de l'API Node-Fetch

Tout d'abord, comme il s'agit d'un tutoriel Node.JS, vous devez bien sûr avoir installé Node.JS. Si vous ne l'avez pas encore, vous pouvez le télécharger et l'installer à partir de ce lien.

Node.js a mis en place un support expérimental pour l'API Fetch uniquement à partir de la version 17.5. Vous devrez donc avoir au moins la version 17.5 de Node. Vous devrez également utiliser l'option -experimental-fetch lors de l'exécution de vos scripts.

Si vous avez une version inférieure de Node.JS, vous pouvez utiliser le paquet n pour passer à la dernière version. N est un paquetage npmjs dont le seul but est de vous permettre de passer d'une version de node à une version de npm. Pour l'installer et passer à la dernière version, suivez ces étapes :

npm install -g n
n latest

Les n latest installe la dernière version de Node.js. Pour vérifier votre version de Node.js, exécutez simplement cette commande :

node -version

Comment utiliser Node-Fetch

Effectuer une requête HTTP dans n'importe quel langage de programmation est une opération asynchrone, puisque la réception de la réponse à la requête prend du temps. Il existe deux approches pour utiliser les opérations asynchrones. Vous pouvez soit décider d'attendre la réponse et de poursuivre votre code, soit exécuter votre code en parallèle.

Node-Fetch prend en charge les appels de fonction synchrones et asynchrones.

Demandes GET dans Node-Fetch

Pour effectuer une simple requête get et extraire le corps de la réponse, vous pouvez utiliser le morceau de code ci-dessous :

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

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

    .then((body) => {

        console.log(body);

    });

Pour exécuter ce code, vous devez le sauvegarder dans un fichier appelé node-fetch-example.js et l'exécuter à partir du même dossier en utilisant cette commande : node --experimental-fetch node-fetch-example.js. Notez qu'en l'exécutant, vous obtiendrez un avertissement disant que "The Fetch API is an experimental feature" (L'API Fetch est une fonctionnalité expérimentale). C'est normal puisqu'il s'agit d'une fonctionnalité expérimentale au moment de la rédaction de cet article.

Le morceau de code précédent n'attend pas la fin de la requête pour poursuivre son exécution. Cela signifie que tout code situé en dessous de celui-ci commencera à s'exécuter immédiatement, sans attendre la fin de la recherche. Par exemple, si vous ajoutez un code console.log("Quelque chose") ; sous le code, l'exécution du script donnera ce résultat :

Pour mieux expliquer le code ci-dessus, vous pouvez remarquer que nous utilisons la fonction "then" deux fois. Le premier "then" s'exécutera lorsque nous recevrons une réponse de la requête HTTP, et ce qu'il fait est de mapper cette réponse avec le contenu de la fonction response.text() (qui renvoie le corps de la réponse). Mais la méthode response.text() est également asynchrone, et nous devons donc attendre sa réponse dans le second "then", où body est égal au résultat de la promesse response.text().

Vous pouvez également appeler l'API fetch en utilisant await comme nous le faisons dans l'exemple suivant :

(async () => {

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

    const body = await response.text();

    console.log(body);

})();

Cela explique encore mieux comment fonctionne l'API fetch et quelles sont les promesses que vous devez attendre. Dans la suite de cet article, nous utiliserons l'API fetch avec await, car cela nous permet de conserver une syntaxe plus propre pour le code.

Envoi d'en-têtes à la demande

Une autre fonctionnalité dont vous aurez besoin lors de l'envoi de requêtes est la possibilité de définir les en-têtes de la requête que vous effectuez. Pour ce faire, vous pouvez ajouter les en-têtes dans le deuxième paramètre de l'API de récupération, comme ceci :

(async () => {

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

        headers: {

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

        }

    });

    const body = await response.text();

    console.log(body);

})();

Outre les en-têtes, il existe de nombreuses autres options que vous pouvez envoyer dans le deuxième paramètre de l'API fetch. Pour les voir toutes, consultez la documentation de l'API fetch (celle qui est utilisée côté client).

Demandes POST dans Node-Fetch

Une autre option importante de l'API fetch est l'option method. Elle spécifie la méthode utilisée pour la requête HTTP. Il existe 5 méthodes que vous pouvez utiliser : GET, POST, PUT, PATCH et DELETE, mais parmi elles, les deux premières sont les plus utilisées (GET et POST). Par défaut, si aucune méthode n'est spécifiée, Node-Fetch utilisera GET.

Pour effectuer une requête POST à l'aide de Node-Fetch, vous pouvez utiliser cet extrait de code :

(async () => {

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

        method: 'POST',

        body: JSON.stringify({

            'key': 'value'

        })

    });

    const body = await response.text();

    console.log(body);

})();

Ce que vous pouvez remarquer ici, c'est que nous utilisons JSON.stringify pour envoyer le corps de la requête. C'est parce que l'api fetch envoie le corps sous forme de chaîne de caractères au lieu d'un objet, comme le font d'autres paquets tels qu'axios.

L'API "fetch" couvre également toutes les autres méthodes de requête.

Gestion des erreurs dans Node-Fetch

La gestion des erreurs lors des requêtes HTTP est indispensable, car on ne peut jamais compter sur la disponibilité permanente d'un service tiers. La meilleure pratique consiste à toujours gérer les erreurs, afin d'éviter que votre application ou votre script ne tombe en panne en même temps que l'url à laquelle vous adressez la requête.

La gestion des erreurs dans node-fetch peut se faire en entourant le code d'une simple syntaxe try catch. Voici un exemple de la façon de procéder lorsque l'on utilise await :

(async () => {

    try {

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

        const responseBody = await response.text();

    } catch (error) {

        console.log(error.message);

    }

})();

Si vous préférez utiliser fetch sans await, vous pouvez ajouter un catch à votre code comme ceci :

fetch('[INVALID_URL]')

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

    .then((body) => {

        console.log(body);

    })

    .catch((error) => {

        console.log(error.message);

    });

Cas d'utilisation de Node-Fetch

Les requêtes HTTP peuvent être utiles à bien des égards, car elles permettent d'obtenir de nouvelles informations auprès de différents services et d'extraire des données d'une manière simple et élégante. Il existe quelques cas d'utilisation que nous allons explorer dans les paragraphes suivants.

Utiliser Node-Fetch pour les demandes d'API

Lors de la programmation, il arrive souvent que vous ayez besoin d'utiliser une API. La raison en est que vous pouvez avoir besoin d'obtenir des données spécifiques à partir d'une source dorsale différente, puis de les traiter ou de les mettre à jour. Un bon exemple serait une API avec 4 points d'extrémité qui vous permet de créer, lire, mettre à jour et supprimer des utilisateurs (opérations CRUD) dans une base de données dorsale à partir d'un autre serveur.

Souvent, une telle API nécessite une authentification pour éviter que des sources non autorisées ne l'utilisent et ne modifient les données à leur avantage. Les requêtes HTTP disposent de nombreuses méthodes d'authentification. L'une des plus courantes est l'utilisation d'une clé API : le fournisseur de l'API vous donne une clé que vous êtes le seul à connaître, et les points de terminaison de l'API ne fonctionnent que si vous envoyez la clé correcte.

Une autre méthode de protection de l'API est l'authentification de base. Cela signifie que pour accéder à l'API, vous devez envoyer un en-tête contenant une chaîne encodée en base64 du format "nom d'utilisateur:mot de passe". Voici un exemple d'utilisation de l'authentification de base dans une requête POST :

(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);

})();

Utiliser Node-Fetch pour le Web Scraping

Le Web Scraping est un moyen d'obtenir du contenu à partir de sites web et de l'analyser, afin de ne conserver que les données nécessaires, que vous pouvez utiliser comme vous le souhaitez. Une bonne bibliothèque npmjs que vous pouvez utiliser pour faciliter l'analyse des données est cheerio. Cette bibliothèque vous permet d'interroger du html statique, une fois obtenu par l'api fetch, de la même manière que vous le feriez à partir de javascript ou de jquery.

Voici un exemple d'obtention du titre d'une page à l'aide de l'API fetch et cheerio :

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());

})();

L'exemple ci-dessus devrait renvoyer "WebScrapingAPI | All-In-One Scraping API" car il s'agit du titre de la page (le texte écrit en haut de la fenêtre dans votre navigateur). Pour décomposer, nous utilisons fetch pour obtenir la source de la page HTML à partir de https://www.webscrapingapi.com/ et nous utilisons cheerio pour analyser ce contenu. Pour en savoir plus sur cheerio, vous pouvez consulter leur documentation ici 

La récupération d'informations sur d'autres sites web peut s'avérer utile à bien des égards. Par exemple, les informations récupérées peuvent être utilisées pour créer un ensemble de données d'entraînement pour un modèle d'apprentissage automatique ou pour créer un outil de comparaison de prix qui extrait des données de nombreuses sources et les compare ensuite.

Bien que l'exemple ci-dessus fonctionne bien, l'api fetch n'est pas toujours la meilleure option lorsqu'il s'agit de scraping. En effet, les sites web modernes affichent aujourd'hui leur contenu en javascript et utilisent des captchas ou d'autres méthodes pour empêcher le scraping de leurs données. L'API fetch fonctionne comme un simple CURL vers l'url donnée et récupère le contenu statique que la page affiche lorsqu'elle est chargée, sans aucun rendu javascript.

Pour récupérer des données tout en exécutant le code javascript sur la page, vous pouvez envisager des alternatives telles que puppeteer, comme décrit dans cet article sur le scraping avancé. Si vous ne voulez pas vous embêter, vous pouvez utiliser WebScrapingAPI, une API spécialement conçue pour cette tâche, qui prend en charge tous ces problèmes (y compris les détections de robots) et qui est livrée avec une version d'essai gratuite avec toutes les fonctionnalités incluses. 

Résumé

Pour résumer, la bonne nouvelle est que l'api fetch tant attendue est enfin disponible dans node.js même si pour l'instant elle n'en est qu'au stade expérimental (au moment où j'écris cet article). Bien que faire des requêtes dans node.js était possible auparavant, la seule façon de les faire était de passer par les objets XMLHttpRequest/XHR ou par l'un des nombreux paquets existants tels que Axios ou GOT.

Ce changement rendra javascript côté client et nodejs côté serveur plus similaires, puisque cette fonctionnalité était déjà disponible et supportée par tous les navigateurs modernes sur le javascript côté client.

Effectuer des requêtes HTTP peut s'avérer utile à bien des égards, par exemple pour utiliser une API ou extraire des données d'un site web. Bien que les autres paquets npm restent une option et continueront à être utilisés sur les projets existants, l'utilisation de fetch est la meilleure solution pour l'avenir. Cela améliorera la lisibilité du code nodejs et facilitera le passage du frontend au backend.