Cours JavaScript asynchrone : promesses, async/await et fetch
JavaScript asynchrone (promesses, fetch, API) est un cours de niveau intermédiaire de 5 leçons (environ 2 h 24), avec 17 exercices et 15 questions de quiz. Prérequis : DOM et événements. Les exercices s'exécutent dans le navigateur, sans installation.
- Front-end
- Intermédiaire
- 5 leçons
- 2 h 24
- 17 exercices
- Exercices exécutés dans le navigateur
Le cours en bref
Ce cours explique comment JavaScript gère les opérations qui prennent du temps sans bloquer la page. Vous passerez des callbacks aux promesses puis à async/await, apprendrez à combiner plusieurs opérations et à consommer une API JSON avec fetch, en gérant erreurs, délais et annulation. Chaque leçon se termine par des exercices testés automatiquement, sans réseau, grâce à des réponses simulées.
Ce que tu sauras faire
- Expliquer la boucle d'événements et prévoir l'ordre d'exécution d'un code asynchrone
- Créer, enchaîner et sécuriser des promesses avec then, catch et finally
- Écrire des fonctions async/await lisibles avec une gestion d'erreurs try/catch
- Combiner des opérations avec Promise.all, allSettled, race et any
- Consommer une API JSON avec fetch : GET, POST, vérification du statut, timeout et annulation
- Rendre son code réseau testable en injectant une fonction fetch factice
Programme des 5 leçons
- Distinguer code synchrone et code asynchrone
- Expliquer le rôle de la pile d'appels, de la file des tâches et des microtâches
- Prévoir l'ordre d'exécution d'un programme utilisant setTimeout et des callbacks
Boucle d'événementsFonctions de rappel (callbacks)setTimeout
- 02
Les promesses : créer, enchaîner, gérer les erreurs
- Créer une promesse avec le constructeur Promise
- Enchaîner des traitements avec then, catch et finally
- Propager et intercepter correctement les erreurs dans une chaîne
PromessesChaînage de promessesGestion des erreurs asynchrones
- 03
async/await et try/catch
- Écrire des fonctions async et utiliser await
- Gérer les erreurs asynchrones avec try/catch/finally
- Distinguer exécution séquentielle et exécution concurrente
- 04
Combiner les promesses : all, allSettled, race, any
- Choisir entre Promise.all, Promise.allSettled, Promise.race et Promise.any
- Implémenter un délai maximal (timeout) autour d'une promesse
- Traiter une liste d'éléments de façon concurrente
- 05
fetch : consommer une API JSON
- Effectuer des requêtes GET et POST avec fetch
- Vérifier response.ok et lire le corps JSON
- Gérer les erreurs réseau, les erreurs HTTP et l'annulation avec AbortController
Projet final
Tableau de bord météo et actualités résilient
Construisez un module JavaScript qui charge les données d'un tableau de bord depuis trois points d'API (profil, météo, actualités). Le profil est indispensable ; la météo et les actualités peuvent échouer sans bloquer l'affichage. Chaque appel a un délai maximal, les erreurs serveur 5xx sont retentées, et une recherche d'actualités annule la requête précédente. La fonction fetch est injectée pour que l'ensemble soit testable avec des réponses simulées.
Livrables
- Un module chargerDashboard(fetchFn) qui renvoie { profil, meteo, actus, erreurs }
- Une fonction chargerJSON avec vérification de response.ok, timeout et réessai sur les erreurs 5xx
- Une fonction de recherche qui annule la requête précédente avec AbortController
- Une suite de tests Node.js (node:assert) utilisant un fetch factice couvrant succès, 404, 500 et timeout
- Une courte page HTML qui affiche les états chargement, erreur et succès
Critères d'évaluation
- Les appels indépendants sont lancés en concurrence (Promise.all ou allSettled selon le besoin)
- Les erreurs HTTP et réseau sont distinguées et produisent des messages compréhensibles
- Aucun rejet de promesse non géré
- Le code est testable sans réseau et les tests passent
- L'interface reste réactive et indique clairement chaque état
Questions fréquentes
Quelle différence entre une promesse et async/await ?
async/await est une syntaxe construite sur les promesses : une fonction async renvoie une promesse et await attend son résultat. Le comportement est le même, mais le code se lit de haut en bas et les erreurs se gèrent avec try/catch.
Pourquoi fetch ne renvoie-t-il pas d'erreur sur une page 404 ?
fetch ne rejette sa promesse qu'en cas de problème réseau ou d'annulation. Une réponse 404 ou 500 est une réponse HTTP valide : il faut tester response.ok ou response.status pour la traiter comme une erreur.
Faut-il connaître les callbacks pour suivre ce cours ?
Non, la première leçon les présente. Il suffit de connaître les bases de JavaScript : variables, fonctions, tableaux, objets et manipulation du DOM.
Les exercices font-ils de vraies requêtes réseau ?
Non. Les exercices utilisent des promesses locales et des objets Response construits dans le code, ce qui permet de les tester de façon fiable et d'apprendre une bonne pratique : injecter fetch pour rendre son code testable.
Ce cours, raconté pour ton métier
Dis ce que tu veux savoir faire : « JavaScript asynchrone (promesses, fetch, API) » prend sa place dans ton parcours, avec des exemples de ton secteur. Les notions restent celles du cours.