⏳ Async / Await

La science derrière le « Attends une seconde » de JavaScript

Pourquoi tout prend feu quand tu oublies await ? 🔥

Écrire du code asynchrone en JavaScript, c’est un peu comme ça :

Tu essaies de cuisiner en même temps,
le thé est en train d’infuser,
la sonnette retentit,
le téléphone sonne,
quelqu’un crie : « Le Wi-Fi est tombé ! »…

JavaScript fonctionne exactement comme ça.
Et async / await, c’est le policier de la circulation au milieu de ce chaos 🚦

🧠 1️⃣ Analyse de la personnalité de JavaScript (Très important !)

Commençons par comprendre JS, parce que le problème n’est pas le code…
c’est la personnalité.

JavaScript est :

• 🧵 Single-threaded (une chose à la fois)
• ⏩ Rapide
• 😤 Déteste attendre
• 🧠 A une mentalité du genre « on verra ça plus tard »

Donc JS adore ceci :

console.log("1");
console.log("2");
console.log("3");

📤 Résultat :

1
2
3

Paix. Zen. Minimalisme. 🧘‍♂️

💥 2️⃣ Pourquoi tout se casse quand le code asynchrone arrive ?

Jetons maintenant une tâche asynchrone sur scène :

console.log("Started");

setTimeout(() => {
  console.log("Finished");
}, 2000);

console.log("Continuing");

📤 Résultat :

Started
Continuing
Finished

😲 « Attends… ça ne devrait pas patienter 2 secondes ? »

JavaScript répond calmement :

« Moi, je n’attends pas.
**C’est toi qui attends. »

📌 Parce que :

• setTimeout → asynchrone
• JS → ne veut pas être bloqué
• L’attente est déléguée aux Web APIs

🧩 3️⃣ Qu’est-ce qu’une Promise ? (Le « Je promets » de JavaScript)

Une Promise signifie :

« Ce n’est pas encore là…
mais ça va arriver, promis. »

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Les données sont arrivées 🎉");
  }, 2000);
});

📌 Une Promise a 3 états :

Mais voici le point crucial :

Une Promise n’est pas le résultat
Une Promise = un document qui dit que le résultat arrivera

😈 4️⃣ Le vrai désastre : oublier await

L’erreur classique :

async function getData() {
  const data = fetch("https://api.example.com/data");
  console.log(data);
}

getData();

📤 Résultat :

Promise { <pending> }

🔥🔥🔥
« OÙ SONT MES DONNÉES ?! »

JavaScript reste zen :

« Je ne t’ai pas donné des données.
Je t’ai donné un reçu. »

🧠 5️⃣ Que fait await ? (La ligne qui sauve des vies)

await veut dire :

« Stop.
Attends que cette Promise se termine.
Puis continue. »

Utilisation correcte :

async function getData() {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  console.log(data);
}

📌 Étape par étape :

1️⃣ fetch démarre
2️⃣ await → JS fait une pause ici
3️⃣ La Promise se résout
4️⃣ Les vraies données arrivent
5️⃣ Console : 🎉

🧪 6️⃣ Mini expérience : avec ou sans await

❌ Sans await

async function example() {
  const result = Promise.resolve(42);
  console.log(result);
}

📤 Résultat :

Promise { 42 }

✅ Avec await

async function example() {
  const result = await Promise.resolve(42);
  console.log(result);
}

📤 Résultat :

42

🎯 Résumé rapide :

• Pas de await → promesse
• Avec await → réalité

🤯 7️⃣ « Pourquoi tout est en feu ? »

Scénario très familier :

const user = await getUser();
console.log(user.name);

Mais si tu oublies await :

const user = getUser();
console.log(user.name);

📤 Résultat :

TypeError: Cannot read property 'name'

🔥🔥🔥

📌 Parce que :

• user = Promise
• Les Promises n’ont pas de name

JavaScript dit :

« Tu m’as donné une Promise,
je l’ai donc traitée comme une Promise. »

⚠️ 8️⃣ Les erreurs Async / Await les plus courantes

❌ Utiliser await sans async

function test() {
  await fetch(url); // ❌
}

❌ Traiter une Promise comme une valeur normale
❌ Utiliser await dans un map

items.map(async item => {
  await doSomething(item);
});

📌 Ça n’attend pas !

🚀 9️⃣ Échapper au piège du map asynchrone

❌ Faux

items.map(async item => {
  await process(item);
});

✅ Correct

await Promise.all(
  items.map(item => process(item))
);

📌 Promise.all :

• Lance tout
• Attend tout
• Puis continue

🎯 Performance + contrôle = ❤️

🛡️ 🔟 N’écris jamais de l’async sans try / catch

Code async = échec possible.

async function loadData() {
  try {
    const res = await fetch(url);
    const data = await res.json();
    console.log(data);
  } catch (error) {
    console.error("Quelque chose a brûlé 🔥", error);
  }
}

📌 try/catch = extincteur 🧯
📌 Async sans try/catch = allumer un barbecue avec de l’essence

🧠 1️⃣1️⃣ Règles d’or (Conseils du monde réel)

✅ Méfie-toi de tout ce qui retourne une Promise
✅ Tu veux le résultat ? Utilise await
✅ Travail parallèle → Promise.all
✅ Lisibilité > code malin
✅ En debug : console.log(await value)

🏁 MOT DE LA FIN : Ce que JavaScript te dit

JavaScript dit :

« Je suis rapide.
Mais si tu ne m’apprends pas à attendre,
je ne m’arrêterai jamais. »

Et souviens-toi :

Si tu oublies await,
le code s’exécute…
mais la logique, non 😏