Introduction à l'API Node-Fetch
Avant de vous parler de l'API Node-Fetch, je dois vous donner quelques informations sur ce qu'est une requête HTTP. Le but d'une requête HTTP est de récupérer des informations à partir d'URL sur 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'XMLHttpRequest ou d'objets XHR, tous les navigateurs modernes prennent aujourd'hui en charge l'API Fetch de JavaScript. Cela permet aux programmeurs d'effectuer des requêtes avec une syntaxe beaucoup plus simple et épurée. Cependant, l'API Fetch a longtemps fait défaut au langage côté serveur Node.JS, laissant la place à d'autres bibliothèques personnalisées pour prendre en charge cette fonctionnalité, telles que : Axios, GOT et bien d'autres.
Node-Fetch est l'équivalent de l'API Fetch de JavaScript, et elle est désormais enfin disponible dans Node.JS également.
Prérequis pour utiliser l'API Node-Fetch
Tout d'abord, comme il s'agit d'un tutoriel Node.JS, vous devrez 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 publié une prise en charge expérimentale de l'API Fetch à partir de la version 17.5 uniquement. Vous devrez donc disposer au minimum de la version 17.5 de Node. De plus, vous devrez utiliser l'indicateur –experimental-fetch lors de l'exécution de vos scripts.
Si vous disposez d'une version antérieure de Node.JS, vous pouvez utiliser le package n pour passer à la dernière version. N est un package npmjs dont le seul but est de vous permettre de basculer entre les versions de Node et de npm. Pour l'installer et passer à la dernière version, procédez comme suit :
npm install -g n
n latestLa commande n latest installera la dernière version de Node.js. Pour vérifier votre version de Node.js, il vous suffit d'exécuter cette commande :
node –versionComment utiliser Node-Fetch
Effectuer une requête HTTP dans n'importe quel langage de programmation est une opération asynchrone, car 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 puis de poursuivre votre code, soit exécuter votre code en parallèle.
Node-Fetch prend en charge les appels de fonction synchrones et asynchrones.
Requêtes GET dans Node-Fetch
Pour effectuer une simple requête GET et extraire le corps de la réponse, vous pouvez utiliser le bout 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 l'enregistrer dans un fichier nommé node-fetch-example.js et l'exécuter depuis le même dossier à l'aide de cette commande : node --experimental-fetch node-fetch-example.js. Notez que lors de l'exécution, vous obtiendrez un avertissement indiquant que « L'API Fetch est une fonctionnalité expérimentale ». C'est normal, car il s'agit d'une fonctionnalité expérimentale au moment de la rédaction de cet article.
Le code précédent n'attend pas que la requête soit terminée avant de poursuivre son exécution. Cela signifie que tout code situé en dessous commencera à s'exécuter immédiatement, sans attendre que la requête soit terminée. Par exemple, si vous ajoutez console.log(« Something »); sous le code, lors de l'exécution du script, la sortie ressemblera à ceci :
Pour expliquer plus en détail le code ci-dessus, vous remarquerez peut-être 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 son rôle est de mapper cette réponse avec le contenu de la méthode response.text() (qui renvoie le corps de la réponse). Cependant, la méthode response.text() est également asynchrone ; nous devons donc attendre sa réponse dans le deuxième « then », où body correspond au résultat de la promesse de response.text().
Vous pouvez également appeler l'API fetch en utilisant await, comme dans l'exemple suivant :
(async () => {
const response = await fetch('https://webscrapingapi.com');
const body = await response.text();
console.log(body);
})();Cela donne une explication encore plus claire du fonctionnement de l’API fetch et des promesses que vous devez attendre. Plus loin dans cet article, nous utiliserons l’API fetch avec await, car cela nous permet de conserver une syntaxe plus claire pour le code.
Envoi d'en-têtes à la requête
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 fetch, 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 découvrir toutes, consultez la documentation de l'API fetch (celle utilisée côté client).
Requêtes POST dans Node-Fetch
Une autre option importante de l'API fetch est l'option method. Celle-ci spécifie la méthode que vous utilisez pour la requête HTTP. Vous pouvez utiliser 5 méthodes : GET, POST, PUT, PATCH et DELETE, mais parmi celles-ci, les deux premières sont les plus couramment 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);
})();
Vous remarquerez peut-être ici que nous utilisons JSON.stringify pour envoyer le corps de la requête. En effet, l'API fetch envoie le corps sous forme de chaîne de caractères plutôt que d'objet, contrairement à d'autres bibliothèques telles 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 de l'envoi de requêtes HTTP est indispensable, car vous ne pouvez jamais compter sur la disponibilité permanente d'un service tiers. Il est recommandé de 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 vers laquelle vous envoyez la requête.
La gestion des erreurs dans Node-Fetch peut être effectuée en encadrant le code d'une simple syntaxe try-catch. Voici un exemple illustrant comment procéder lorsque vous utilisez 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
Effectuer des requêtes HTTP peut s'avérer utile à bien des égards, car cela permet d'obtenir de nouvelles informations provenant de différents services et d'extraire des données de manière assez élégante et simple. Il existe quelques cas d'utilisation que nous allons explorer dans les paragraphes suivants.
Utiliser Node-Fetch pour les requêtes API
Lors de la programmation, vous pouvez souvent avoir besoin d'utiliser une API. La raison en est que vous pouvez avoir besoin d'obtenir des données spécifiques provenant d'une source backend différente, puis de les traiter ou de les mettre à jour. Un bon exemple ici serait une API avec 4 points de terminaison qui vous permet de créer, lire, mettre à jour et supprimer des utilisateurs (opérations CRUD) dans une base de données backend depuis un autre serveur.
Souvent, une telle API nécessite une authentification pour empêcher des sources non autorisées de l'utiliser et de modifier les données à leur avantage. Les requêtes HTTP disposent de nombreuses méthodes d'authentification. L'une des plus courantes consiste à utiliser une clé API : le fournisseur de l'API vous attribue une clé que vous seul devez connaître, et les points de terminaison de l'API ne fonctionnent que lorsque la clé correcte est envoyée.
Une autre méthode permettant de protéger une API est l'authentification de base. Cela signifie que pour accéder à l'API, vous devrez envoyer un en-tête contenant une chaîne codée en base64 au format « nom d'utilisateur:mot de passe ». Voici un exemple illustrant comment utiliser 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);
})();Utilisez Node-Fetch pour le web scraping
Le web scraping est une méthode permettant d’extraire du contenu de sites web et de l’analyser, afin de ne conserver que les données nécessaires, que vous pouvez ensuite utiliser comme bon vous semble. 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 code HTML statique, une fois obtenu via l’API fetch, de la même manière que vous le feriez depuis JavaScript ou jQuery.
Voici un exemple illustrant comment récupérer le titre d'une page à l'aide de l'API fetch et de 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 affiché en haut de la fenêtre de votre navigateur). Pour résumer, nous utilisons fetch pour récupérer le code 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
L'extraction d'informations à partir d'autres sites web peut s'avérer utile à bien des égards. Par exemple, les informations extraites peuvent servir à créer un ensemble de données d'entraînement pour un modèle d'apprentissage automatique ou à développer un outil de comparaison de prix qui extrait des données de nombreuses sources pour ensuite les comparer.
Bien que l'exemple ci-dessus fonctionne correctement, l'API fetch n'est pas toujours la meilleure option en matière de scraping. En effet, les sites web modernes affichent aujourd'hui leur contenu via JavaScript et utilisent des captchas ou d'autres méthodes pour empêcher l'extraction de leurs données. L'API fetch fonctionne comme une simple requête CURL vers l'URL donnée et récupère le contenu statique que la page affiche lors de son chargement, sans aucun rendu JavaScript.
Pour extraire des données tout en exécutant le code JavaScript de la page, vous pouvez vous tourner vers des alternatives telles que Puppeteer, comme décrit dans cet article sur le scraping avancé. Si vous ne souhaitez toutefois pas vous lancer dans cette démarche complexe, vous pouvez utiliser WebScrapingAPI, une API spécialement conçue pour cette tâche, qui prend en charge tous ces problèmes (y compris la détection anti-bot) et propose un essai gratuit incluant toutes les fonctionnalités.
Résumé
En résumé, la bonne nouvelle est que la très attendue API Fetch est enfin disponible dans Node.js, même si, pour l'instant, elle n'en est qu'au stade de fonctionnalité expérimentale (au moment de la rédaction de cet article). Bien qu'il fût déjà possible d'effectuer des requêtes dans Node.js auparavant, la seule façon de le faire était soit via les objets XMLHttpRequest/XHR, soit via l'un des nombreux paquets disponibles tels qu'Axios ou GOT.
Ce changement rapprochera davantage le JavaScript côté client et Node.js côté serveur, puisque cette fonctionnalité était déjà disponible et prise en charge par tous les navigateurs modernes 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. Si les autres paquets npm resteront une option et continueront d'être utilisés dans les projets existants, l'utilisation de fetch est la meilleure solution pour l'avenir. Cela améliorera la lisibilité du code Node.js et facilitera encore davantage le passage du front-end au back-end.
