✨ Semaine 4 - Jour 3 : Async/Await

🚀 La syntaxe moderne pour l'asynchronisme

async/await est la syntaxe la plus moderne et la plus lisible pour gérer les opérations asynchrones en JavaScript. Elle a été introduite dans ES2017 et transforme radicalement la façon dont on écrit du code asynchrone.

Pourquoi c'est génial ? Au lieu d'enchaîner des .then(), on écrit du code asynchrone qui ressemble à du code synchrone normal. C'est plus facile à lire, à écrire et à déboguer !

Dans ce cours : La syntaxe async/await, le mot-clé await, la gestion d'erreurs avec try/catch, comparaison avec .then(), et comment refactoriser du code existant.

1. La syntaxe async

Le mot-clé async devant une fonction indique qu'elle retourne toujours une Promise.

// Fonction async simple
async function direBonjour() {
  return 'Bonjour !';
}

// Équivalent à :
function direBonjourPromise() {
  return Promise.resolve('Bonjour !');
}

💡 Utilisation :

direBonjour().then(msg => {
  console.log(msg); // Bonjour !
});

2. Le mot-clé await

await permet d'attendre qu'une Promise se résolve. Il ne peut être utilisé que dans une fonction async.

async function getData() {
  // Attend que fetch se termine
  const response = await fetch('api.com/data');
  const data = await response.json();
  return data;
}

⚠️ Important : await "pause" l'exécution de la fonction jusqu'à ce que la Promise se résolve.

3. Gestion d'erreurs : try/catch

Avec async/await, on utilise try/catch au lieu de .catch() pour gérer les erreurs.

async function fetchUser(id) {
  try {
    const response = await fetch(`/users/${id}`);
    const user = await response.json();
    console.log(user);
  } catch (error) {
    console.error('Erreur:', error);
  }
}

✅ Bonne pratique : Toujours wrapper vos await dans un try/catch !

4. Pourquoi async/await ?

Avantages :

  • Code plus lisible et plus proche du code synchrone
  • Meilleure gestion des erreurs avec try/catch
  • Débogage plus facile
  • Évite le "callback hell"

Quand l'utiliser ?

  • Pour des opérations asynchrones séquentielles
  • Quand le code doit être facile à lire
  • Pour du code professionnel moderne

⚖️ Comparaison : .then() vs async/await

❌ Avec .then() (ancien style)

function getUser(id) {
  fetch(`/users/${id}`)
    .then(response => response.json())
    .then(user => {
      fetch(`/posts/${user.id}`)
        .then(res => res.json())
        .then(posts => {
          console.log(posts);
        })
        .catch(err => console.error(err));
    })
    .catch(err => console.error(err));
}

Problèmes : Imbrications, difficile à lire, erreurs à gérer à plusieurs endroits

✅ Avec async/await (moderne)

async function getUser(id) {
  try {
    const response = await fetch(`/users/${id}`);
    const user = await response.json();
    
    const postsResponse = await fetch(`/posts/${user.id}`);
    const posts = await postsResponse.json();
    
    console.log(posts);
  } catch (error) {
    console.error(error);
  }
}

Avantages : Linéaire, facile à lire, une seule gestion d'erreur

🎯 Démonstration 1 : Async/Await Simple

Récupère un utilisateur aléatoire avec async/await :

Cliquez pour lancer la requête...

🔄 Démonstration 2 : Requêtes séquentielles

Charge un utilisateur, puis tous ses articles (2 requêtes séquentielles) :

Cliquez pour voir les requêtes en séquence...

⚡ Démonstration 3 : Requêtes parallèles avec Promise.all()

Charge 3 utilisateurs EN PARALLÈLE (plus rapide) :

Cliquez pour voir les requêtes parallèles...

❌ Démonstration 4 : Gestion d'erreurs avec try/catch

Tente de charger un utilisateur qui n'existe pas :

Cliquez pour voir la gestion d'erreur...
⚡ Console JavaScript Interactive - Testez async/await !
Prêt à exécuter votre code...

💻 Exemples à tester

// 1. Fonction async simple
async function exempleSimple() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
  const user = await response.json();
  console.log(user.name);
}
exempleSimple();

// 2. Avec gestion d'erreur
async function avecGestionErreur() {
  try {
    const res = await fetch('https://jsonplaceholder.typicode.com/users/999');
    const user = await res.json();
    console.log(user);
  } catch (error) {
    console.error('❌ Erreur capturée:', error.message);
  }
}
avecGestionErreur();

// 3. Promise.all() pour requêtes parallèles
async function chargerPlusieursUtilisateurs() {
  const [user1, user2, user3] = await Promise.all([
    fetch('https://jsonplaceholder.typicode.com/users/1').then(r => r.json()),
    fetch('https://jsonplaceholder.typicode.com/users/2').then(r => r.json()),
    fetch('https://jsonplaceholder.typicode.com/users/3').then(r => r.json())
  ]);
  console.log(user1.name, user2.name, user3.name);
}
chargerPlusieursUtilisateurs();

👆 Testez ces exemples dans la console interactive !

Froggiesplaining :


🎯 Objectifs de ce cours :
✅ Maîtriser la syntaxe async function
✅ Utiliser le mot-clé await correctement
✅ Gérer les erreurs avec try/catch
✅ Comprendre la différence entre .then() et async/await
✅ Savoir quand utiliser Promise.all() pour des requêtes parallèles

📖 Points clés à retenir :
• async devant une fonction la transforme en fonction qui retourne une Promise
• await ne peut être utilisé QUE dans une fonction async
• await "pause" l'exécution jusqu'à ce que la Promise se résolve
• Utilisez try/catch pour gérer les erreurs avec async/await
• Promise.all() permet d'exécuter plusieurs Promises en parallèle
• async/await rend le code asynchrone plus lisible et plus facile à déboguer

🏋️ Exercices pratiques :
1. Refactoring : Prenez le code avec .then() du cours précédent et convertissez-le en async/await
2. Chaîne de requêtes : Récupérez un article, puis son auteur, puis tous les articles de cet auteur (avec async/await)
3. Gestion d'erreur : Créez une fonction qui teste si une URL répond correctement (try/catch)
4. Promise.all() : Chargez les 10 utilisateurs de JSONPlaceholder en parallèle et affichez leurs noms
5. Loading state : Créez une fonction qui affiche "Chargement...", charge des données, puis affiche "Terminé !"

💡 Astuces pro :
• Séquentiel vs Parallèle : Si les requêtes sont indépendantes, utilisez Promise.all() pour les lancer en parallèle (plus rapide !)
• Top-level await : Dans les modules ES6, vous pouvez utiliser await directement sans async function
• Débogage : async/await est plus facile à déboguer car la stack trace est plus claire
• En production, combinez async/await avec des loading states pour une meilleure UX

Froggie explain

GitHub - eCrea