BaliseTonSite

Asynchrone & Promesses

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

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 :

JavaScriptjavascript
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 :

JavaScriptjavascript
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 :

JavaScriptjavascript
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 :

JavaScriptjavascript
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.

Verifie tes acquis

3 questions pour valider ce chapitre

1. Que represente une Promise en JavaScript ?

Valide et sauvegarde ce chapitre

Ne perds pas le fil de ton apprentissage. Chaque QCM terminé sauvegarde ton score. Crée ton profil gratuitement pour débloquer toutes les évaluations du site et retrouver tes résultats plus tard.

Commencer l'aventure
Déjà membre ?Connecte-toi