Chapitre 7 : Asynchrone et appels API en React
Appels asynchrones, Appels API, Gestion des états
Appels asynchrones
Un appel API prend du temps : il dépend du réseau et d’un serveur externe. JavaScript étant mono-thread, ces opérations doivent être asynchrones pour ne pas bloquer l’interface.
En pratique, cela signifie :
- l’appel est lancé
- le code continue de s’exécuter
- le résultat arrive plus tard
En React, cette réalité a un impact direct sur l’interface utilisateur.
Appels API
Les appels API ne peuvent pas être faits dans le rendu car le rendu d’un composant React doit rester pur et prévisible. Il ne doit pas provoquer d’effets externes comme un appel réseau.
Si un appel API était fait directement dans le corps du composant :
- il serait déclenché à chaque rendu
- cela provoquerait des appels multiples
- l’application deviendrait instable
Ces appels doivent donc être placés dans des “effets” (cf chapitre 6). On utilise généralement useEffect.
Cela permet de lancer l’appel au chargement du composant ou lorsque certaines données changent.
Gestion des états
Un appel API implique toujours plusieurs états possibles :
- les données ne sont pas encore chargées
- les données sont disponibles
- une erreur est survenue
Il est donc courant d’utiliser plusieurs états :
- un état pour les données
- un état pour le chargement
- un état pour les erreurs
Cette gestion permet d’afficher une interface claire et réactive.
L’état de chargement :
L’utilisateur doit être informé qu’une action est en cours. Un état de chargement permet d’afficher un message ou un indicateur visuel.
Sans cet état, l’interface semble figée et l’utilisateur ne comprend pas ce qu’il se passe
La gestion des erreurs :
Un appel API peut échouer pour de nombreuses raisons. Il est important de capturer ces erreurs et de les afficher proprement.
Un état d’erreur permet d’informer l’utilisateur, d’éviter un affichage cassé et de garder une application robuste
En résumé, un flux complet correspond à :
- le composant s’affiche
- useEffect lance l’appel API
- l’état loading passe à true
- les données sont reçues ou une erreur survient
- l’interface se met à jour
Questions clés (validation des acquis du chapitre)
- Pourquoi les appels API sont-ils asynchrones ? Parce qu’ils dépendent de ressources externes et prennent du temps.
- Pourquoi ne pas appeler une API dans le rendu ? Parce que le rendu doit rester pur et ne pas provoquer d’effets.
- Où placer un appel API en React ? Dans un useEffect.
- Pourquoi gérer un état de chargement ? Pour informer l’utilisateur et améliorer l’expérience.
- Pourquoi gérer les erreurs ? Pour rendre l’application fiable et compréhensible.
Exercices :
Exercice - Simulation d’un appel API et rendus
- Créer un composant qui affiche un message “Chargement…”
- L’appel API est simulé avec un setTimeout
- Afficher “Données chargées” une fois le timeout écoulé.
- Simuler également un cas d’échec et afficher le message “Erreur lors du chargement des données”
Attention à bien utiliser useEffect, et les états de React pour gérer tout ça.