Partie 1 : Introduction à l’API Fetch

Dans ce cours, nous allons décortiquer le fichier script.js pour comprendre comment récupérer des données depuis un serveur distant (une API) et les afficher sur notre page web.

Commençons par la première ligne de notre code :

let UserData = [];

1. Préparer le terrain avec une variable globale

Pourquoi déclarer UserData tout en haut du fichier, en dehors de toute fonction ?

• Portée globale : En déclarant cette variable ici, elle devient accessible partout dans notre fichier. Toutes nos futures fonctions pourront la lire ou la modifier.
• Stockage temporaire : C’est dans ce tableau vide que nous allons sauvegarder la liste des utilisateurs une fois que le serveur nous les aura envoyés.
• let et non const : Nous utilisons let car la valeur de cette variable va changer. D’abord vide ([]), elle sera plus tard remplacée par un tableau rempli de données.

2. Qu’est-ce qu’une API ?

Une API (Application Programming Interface) agit comme un serveur de restaurant. Vous (le client) passez une commande (une requête HTTP) au serveur. Le serveur apporte la commande en cuisine (la base de données), puis vous ramène votre plat (les données JSON).

Dans notre projet, notre “cuisine” sera l’URL : https://dummyjson.com/users?limit=24 Cette URL spécifique nous renverra les données générées aléatoirement de 24 faux utilisateurs.

Dans le prochain chapitre, nous allons voir comment écrire la fonction qui passe cette commande !