Comprendre les Promesses et Async / Await en JavaScript (ES6+)
Apprenez à structurer votre code asynchrone sans callback hell grâce aux Promesses natives et aux mots-clés async / await.
Explications & Fondations Techniques
Une `Promise` représente une valeur qui sera disponible dans le futur : en cours (pending), résolue (fulfilled) ou rejetée (rejected).
`async` devant une fonction garantit qu'elle renvoie toujours une promesse. `await` suspend l'exécution de la fonction asynchrone jusqu'à la résolution de la promesse.
Pour exécuter plusieurs requêtes réseau en parallèle sans blocage séquentiel, `Promise.all([p1, p2])` lance toutes les opérations simultanément.
Exemple de Code Pratique
Exécuter dans le Playground// 1. Définition d'une fonction asynchrone
async function chargerDonneesUtilisateur(userId) {
try {
const reponse = await fetch(`https://api.example.com/users/${userId}`);
if (!reponse.ok) {
throw new Error(`Erreur HTTP: ${reponse.status}`);
}
const utilisateur = await reponse.json();
return utilisateur;
} catch (erreur) {
console.error("Échec du chargement :", erreur.message);
throw erreur;
}
}
// 2. Parallélisation avec Promise.all
async function chargerDashboard() {
const [profil, stats] = await Promise.all([
fetch('/api/profil').then(r => r.json()),
fetch('/api/stats').then(r => r.json()),
]);
console.log("Données chargées en parallèle :", profil, stats);
}Pièges Fréquents & Mauvaises Pratiques
✗ Exécuter des promesses indépendantes en série au lieu de les paralléliser
const user = await fetchUser();
const posts = await fetchPosts(); // Attend user inutilementconst [user, posts] = await Promise.all([fetchUser(), fetchPosts()]);Attendre deux promesses indépendantes en série double le temps d'attente réseau. Promise.all divise la latence par deux.
Questions Fréquentes
Quelle est la différence entre .then() et async / await ?▾
`async/await` est un sucre syntaxique au-dessus des Promesses. Il permet d'écrire du code asynchrone avec l'apparence et la lisibilité du code synchrone classique, facilitant la gestion d'erreurs avec `try/catch`.
Maîtrisez JavaScript pas à pas
Résolvez des défis interactifs directement dans votre navigateur avec retour immédiat et indices progressifs.