Exemple : Faire un fetch avec Node.js et npm

La page ci-dessous correspond au troisième tuto de présentation de Node.js. Elle est dédiée à l'apport de l'outil npm dans le développement d'une application sous Node.js.

Supposons que j'ai besoin de faire un fetch sous Node.js 😇. Il se trouve que je me sers sans arrêt de fetch dans mes applications clients (côté navigateur) et j'ai envie de faire pareil côté serveur. Je rappelle que fetch nous permet de faire une requête http pour aller chercher une ressource sur un serveur. Là moi, je suis côté serveur et j'ai besoin d'aller chercher une ressource. Après tout, il n'y a pas que les applications clients qui ont besoin de ressources. Mais voilà, si je vais dans la doc de Node.js version 16.17.0 , il y a bien une Api Http, mais il n'y a pas de fetch dedans.

Donc, j'ai besoin d'une fonctionnalité que je n'ai pas. Imaginez que je sois en train de travailler côté navigateur. Qu'est-ce que je ferais ? Eh bien, probablement, j'irais chercher cette fonctionnalité dans une librairie que j'inclurais au début de mon script. Du coup mon script dépendrait de cette librairie. Et on pourrait imaginer que j'ai besoin de plusieurs librairies et même que l'une d'entre elles ait aussi besoin de quelque chose pour fonctionner. Donc ça peut vite être compliqué.

Du côté serveur dans un environnement Node.js c'est npm qui va nous aider à faire ça.

npm c'est deux choses :

1. La première, c'est un dépôt de packages www.npmjs.com. Ces packages sont open source et dépendent les uns des autres. Ces dépendances sont enregistrées au niveau du dépôt.
2. La deuxième chose, c'est une commande en ligne nommée npm qui va exploiter ce dépôt. npm va nous permettre d'aller chercher un package avec toutes ses dépendances et de l'installer dans notre environnement Node.js pour que nous puissions l'utiliser.

Donc ça, c'est super, 😎 mais encore faut-il savoir dans quels packages (au pluriel) peut se trouver la fonctionnalité dont nous avons besoin. Et il y a d'autres questions qui peuvent apparaître. Quel package choisir s'il y en a plusieurs ? Quelle est la qualité du package ? Quelle est la qualité du code dont mon application va dépendre ?

Allons sur le site www.npmjs.com du dépôt npm et revenons à notre problème de fetch.

Si je tape fetch, je vois apparaître les résultats ci-dessous. J'ai quelques critères pour faire un choix, notamment un code couleur :

• Popularité (Bleu ciel).
• Qualité (Mauve).
• Maintenance (Rouge).

Je vais cliquer sur le deuxième lien, car c'est le plus populaire et en plus, je l'ai déjà utilisé.

Je vois que le package est téléchargé 36 millions de fois par semaine. Il y a de grandes chances pour que ça me convienne...et pourtant...🙃

Donc

Si je pousse la recherche un peu plus loin. Je vais simplement sur Google et je tape node fetch et là, je me rends compte que le fetch est maintenant disponible dans l'Api core de Node.js mais seulement à partir de la version 17.5 (Voir ce blog). Mais voilà, en septembre 2022, la version LTS est en 16.17.0.

Alors ce n'est pas toujours évident de faire un choix 😬 mais personnellement, je préfère rester sur ma version LTS et utiliser le package node-fetch.

Ci-dessous je vais faire un exemple ultra simple dans lequel je vais aller chercher une ressource sur jsonplaceholder.typicode.com.

Pour utiliser le package node-fetch le mieux est de se rendre sur son github et de cliquer sur la page README.md.

1. Dans une invite de commande je tape mpm init -y. Je crée ainsi le fichier package.json.
2. J'ajoute la ligne "type"="module" dans le package.json pour travailler avec les modules ECMAScript. Voir le tuto précédent sur l'api-node.
3. Je tape npm install node-fetch pour installer le module. Dans le fichier package.json, je vois l'installation de node-fetch dans la liste des dépendances de mon projet.

J'exécute et j'obtiens ma réponse. C'est aussi simple que ça d'importer des fonctionnalités lorsque l'on travaille dans un environnement Node.js 😎.

import fetch from 'node-fetch'; const response = await fetch('https://jsonplaceholder.typicode.com/posts/1'); const body = await response.text(); console.log(body);

Si vous ne comprenez pas pourquoi il y a deux await dans le code ci-dessus, je vous renvoie à un tuto que j'ai fait sur fetch dans la playlist JavaScript Asynchrone.