Asynchrone & Promesses

JS peut faire plusieurs choses 'en parallèle' (en apparence), sans bloquer la page. Magie ? Non : asynchrone.

Imagine : tu joues à un RPG où tu peux parler à un marchand, lancer une quête, et continuer à explorer pendant qu'il prépare ta récompense. Tu n'attends pas devant lui à rien faire. C'est ça, l'asynchrone : ton code continue pendant qu'une tâche longue (comme appeler un serveur) se termine en arrière-plan. Et quand c'est prêt… BAM, le résultat arrive.

7.1Synchrone vs asynchrone

En mode synchrone, JS exécute chaque ligne l'une après l'autre. Comme un tour de jeu au tour par tour : on attend la fin d'un tour avant de passer au suivant.
Mais certaines actions sont longues (comme forger une épée légendaire). L'asynchrone permet de lancer ça en arrière-plan, et de continuer à jouer pendant ce temps.

7.2setTimeout()

Tu veux déclencher une action après un délai ? Comme poser une bombe à retardement dans un donjon. Voici l'équivalent JS :

console.log("Tu poses la bombe");

setTimeout(() => {
  console.log("💥 Boum ! Le mur est détruit");
}, 3000);

console.log("Tu t'éloignes en courant");

Résultat : la bombe explose après 3 secondes, pendant que ton personnage continue de bouger. Le jeu ne fige pas.

7.3C'est quoi une promesse ?

Une promesse, c'est comme demander à un PNJ de te forger une arme.
Il te dit "Reviens dans 2 heures" : c'est en attente.
Soit il termine sans souci : réussie.
Soit il casse la lame ou manque de matériaux : échouée.

en attente (pending)
réussie (resolved)
échouée (rejected)

7.4Utiliser une promesse

Voici comment créer une promesse dans ton code. Elle simule un PNJ qui peut réussir ou échouer à créer une potion :

let fabricationPotion = new Promise((resolve, reject) => {
  let ingredientsOK = true;

  if (ingredientsOK) {
    resolve("Potion de mana prête !");
  } else {
    reject("Ingrédients manquants !");
  }
});

7.5then() et catch()

Quand la promesse est prête, tu peux y réagir avec then() (succès) ou catch() (échec), comme recevoir le résultat de ta quête :

fabricationPotion
  .then((message) => {
    console.log("✅ Succès :", message);
  })
  .catch((erreur) => {
    console.log("❌ Échec :", erreur);
  });

7.6async / await

Tu veux un code plus lisible ? Comme un scénario de quête fluide, sans les détours then()/catch() ? Utilise async et await :

async function ouvrirCoffre() {
  try {
    let reponse = await fetch("https://api.tresor.com");
    let loot = await reponse.json();
    console.log("🎁 Tu as trouvé :", loot);
  } catch (erreur) {
    console.log("💀 Le coffre est piégé :", erreur);
  }
}

Avec await, JS attend que la tâche soit finie, mais sans bloquer les autres actions. Ton jeu reste fluide, et ton code aussi.