JavaScript — Fetch API et données dynamiques
Charger des données depuis une API externe
Concepts Théoriques
Fetch API permet à JavaScript de communiquer avec des serveurs — charger des données, envoyer des formulaires, appeler des APIs — le tout sans recharger la page. C'est ce qui rend les applications web modernes possibles.
Le concept
Quand vous tapez une URL dans votre navigateur, il fait une requête HTTP au serveur et reçoit une réponse. Fetch fait exactement la même chose, mais depuis JavaScript, en arrière-plan. La page ne se recharge pas — seules les données arrivent, et votre code décide quoi en faire.
Async / Await — gérer l'asynchrone
Les requêtes réseau prennent du temps (quelques millisecondes à plusieurs secondes). Pendant ce temps, JavaScript ne se bloque pas — il continue à exécuter le reste du code. C'est le concept d'asynchrone.
async/await rend le code asynchrone lisible :
- La fonction doit être déclarée avec async
- await devant fetch() "attend" la réponse
- Le tout dans un try/catch pour gérer les erreurs réseau
Sans try/catch, si le réseau échoue (pas de connexion, serveur en panne, URL incorrecte), votre page plante silencieusement. Le try/catch attrape l'erreur et vous permet d'afficher un message à l'utilisateur.
response.ok et response.json()
fetch() retourne un objet Response. Vérifiez toujours response.ok (qui est true si le code HTTP est 200-299). Puis appelez response.json() pour convertir la réponse en objet JavaScript.
Les 3 états d'un chargement
Toute requête réseau a 3 états que votre interface doit gérer :
- Chargement — afficher un spinner ou un squelette animé (skeleton)
- Succès — afficher les données
- Erreur — afficher un message d'erreur avec un bouton "Réessayer"
Ne laissez JAMAIS une page vide pendant le chargement — l'utilisateur pense que le site est cassé. Un squelette de chargement (des formes grises qui imitent la structure du contenu) est plus élégant qu'un simple spinner.
Les APIs publiques
De nombreuses APIs sont gratuites et ne nécessitent pas de clé : GitHub API (repos, profil), OpenWeather (météo, avec clé gratuite), JSONPlaceholder (données de test), etc.
> Bonne pratique : Affichez un squelette de chargement plutôt qu'un simple spinner. C'est plus élégant et donne l'impression que le site est plus rapide.