Async / Await

Pourquoi async / await ?

Avant ES2017, on utilisait surtout les Promises avec .then() et .catch().
Mais dès que les appels s’enchaînaient, le code devenait difficile à lire.

➡ async et await permettent d’écrire du code asynchrone comme du code synchrone, plus clair et plus lisible.

---

Fonction async

Une fonction marquée async retourne toujours une Promise.

async function saluer() {
  return "Bonjour";
}

saluer().then(msg => console.log(msg)); // Bonjour

---

Await

Le mot-clé await suspends l’exécution de la fonction async jusqu’à ce que la Promise soit résolue. Cela évite de chaîner plusieurs .then().

function attendre(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function demarrer() {
  console.log("Attente...");
  await attendre(2000);
  console.log("Terminé après 2 secondes");
}

demarrer();

---

Exemple concret : avant vs après

Avec `.then()“

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Erreur :", error));

Avec async/await

async function getPost() {
  try {
    let response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Erreur :", error);
  }
}

getPost();

Même résultat, mais beaucoup plus lisible.

---

Gestion des erreurs

async function test() {
  try {
    let reponse = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    let data = await reponse.json();
    console.log(data);
  } catch (e) {
    console.error("Erreur :", e);
  }
}

---

Bonnes pratiques

• Utiliser async/await pour améliorer la lisibilité du code.
• Toujours gérer les erreurs avec try/catch.
• ⚠️ await ne peut être utilisé que dans une fonction async.
• Pour exécuter plusieurs Promises en parallèle, préférer Promise.all plutôt que plusieurs await successifs.

Exemple : exécuter plusieurs Promises en parallèle

async function loadData() {
  let [posts, users] = await Promise.all([
    fetch("/posts").then(r => r.json()),
    fetch("/users").then(r => r.json())
  ]);
  console.log(posts, users);
}