Partie 2 : Asynchrone et await

Avançons dans notre code JavaScript. Nous avons maintenant notre première grande fonction : fetchUser.

const fetchUser = async () => {
    // ... suite du code
};

1. Les mots-clés async et await

Le monde du web fonctionne de manière asynchrone. Quand vous demandez des données à un serveur basé aux États-Unis, cela prend du temps (quelques millisecondes ou secondes). Si JavaScript attendait sans rien faire que les données arrivent, toute votre page web serait figée (bloquée) pendant ce temps !

C’est là qu’interviennent async et await :

• async (Devant la fonction) : Prévient JavaScript que cette fonction va contenir des opérations qui prennent du temps. Elle va s’exécuter en arrière-plan sans bloquer le reste de la page.
• await (Devant l’opération lente) : Dit à JavaScript : “Patiente ici jusqu’à ce que j’aie reçu la réponse du serveur, puis passe seulement à la ligne suivante”.

2. Lancer la requête avec fetch

Regardons le cœur de la requête :

const response = await fetch('https://dummyjson.com/users?limit=24');

• fetch() est la commande native de JavaScript pour aller chercher des choses sur le réseau.
• Nous mettons await devant car interroger le réseau est une action lente.
• Le résultat de cette requête est stocké dans la constante response. Attention, response ne contient pas encore nos utilisateurs immédiatement exploitables ! Elle contient d’abord les informations brutes de la réponse du serveur (le format HTTP, les en-têtes de statut de réussite ou d’erreur, etc.).

Dans la partie suivante, nous verrons comment extraire les vraies données de cette response et comment gérer les erreurs potentielles.