DébutantNon commencé

Exercice 9.3 · 6 min · 0 tentative

Comprendre async/await

🎯 Objectif

Comprendre les mots-clés async et await pour le code asynchrone.

📖 Contexte

Les opérations réseau (API) prennent du temps. async/await permet d'attendre leur résultat de façon lisible :

async function chargerUtilisateur() {
  console.log("Chargement...")

  const response = await fetch("/api/user")
  const user = await response.json()

  console.log("Terminé :", user.name)
}

Les deux mots-clés

Mot-cléRôle
asyncDéclare une fonction asynchrone
awaitAttend la fin d'une opération

Qu'est-ce qu'une Promise ?

Une Promise (promesse) représente une opération qui n'est pas encore terminée mais qui le sera dans le futur.

// Sans async/await (ancien style, plus complexe)
chargerDonnees().then(data => {
  console.log(data)
})

// Avec async/await (moderne, plus lisible)
const data = await chargerDonnees()
console.log(data)

Bonne nouvelle : async/await simplifie le chaînage de .then() que tu viens d'apprendre !

Sans await vs Avec await

// Sans await - résultat = Promise (pas les données)
const resultat = chargerDonnees()

// Avec await - résultat = données (ce qu'on veut)
const resultat = await chargerDonnees()

📝 Consigne

Le code est déjà complet. Observe l'ordre des messages :

  1. "Début du chargement..."
  2. "Données reçues !"
  3. "Utilisateur : Alice"

Résultat attendu :

1. Début du chargement...
2. Données reçues !
3. Utilisateur : Alice

Objectifs

  • Utiliser await
  • Afficher le début
  • Afficher données reçues
  • Afficher Alice

Lis bien les instructions et lance-toi !

Indices (0/3)

Indice 1 verrouillé
Indice 2 verrouillé
Indice 3 verrouillé