⚡ JavaScript Promises : Le Drame, La Comédie et La Logique de l’Univers Asynchrone

⚡ JavaScript Promises : Le Drame, La Comédie et La Logique de l’Univers Asynchrone

En JavaScript, l’asynchronicité ressemble à un travailleur qui suit son propre emploi du temps :

Tu ne sais jamais exactement quand il reviendra,

S’il revient, parfait,

S’il ne revient pas, il envoie une erreur au lieu de discuter,

Parfois il revient en retard,

Parfois il apporte la mauvaise information,

Et parfois… il ne revient jamais.

C’est pour mettre un peu d’ordre dans ce chaos que JavaScript a inventé la structure Promise.

Pense à une Promise comme ceci :
« Je suis en train d’effectuer cette opération. Je ne peux pas te donner le résultat maintenant, mais un jour je le ferai — soit avec succès, soit avec une erreur. »

Et nous contrôlons tout ça grâce aux outils magiques : then – catch – finally – async – await.

Plongeons dans le monde des Promises…


⚡ 1) Qu’est-ce qu’une Promise ?

Une Promise → signifie “un résultat qui arrivera dans le futur”.

Une Promise est toujours dans l’un des 3 états :

ÉtatSignification
pending« Opération en cours, veuillez patienter. »
fulfilled« Tout va bien, j’ai réussi. »
rejected« Non. Quelque chose s’est mal passé. »

📌 Mini exemple :

const askOut = new Promise((resolve, reject) => {
  const sheSaidYes = Math.random() > 0.5;

  setTimeout(() => {
    if (sheSaidYes) {
      resolve("Elle a dit oui !");
    } else {
      reject("Refusé.");
    }
  }, 1000);
});

console.log(askOut);

Première sortie :

Promise { <pending> }

Parce que l’opération est encore en cours.


⚡ 2) then() & catch() : Gérer la Réussite et les Erreurs

then()
S’exécute lorsque la Promise réussit.

catch()
S’exécute lorsque la Promise échoue.

askOut
  .then(response => {
    console.log("Fin heureuse :", response);
  })
  .catch(error => {
    console.log("Erreur :", error);
  });


⚡ 3) finally() : « S’exécute quoi qu’il arrive »

finally() se déclenche qu’il y ait succès ou échec.

askOut
  .then(res => console.log(res))
  .catch(err => console.log(err))
  .finally(() => console.log("Processus terminé."));


⚡ 4) async / await : La Syntaxe Promise la Plus Lisible

Avec async/await, les Promises deviennent beaucoup plus compréhensibles.

await → « Attends ici jusqu’à ce que cette Promise soit terminée. »
async → « Je vais utiliser await dans cette fonction. »

async function date() {
  try {
    const result = await askOut;
    console.log("Résultat :", result);
  } catch (error) {
    console.log("Erreur :", error);
  }
}

date();

Lisible, propre, professionnel.


⚡ 5) Promise.all() : « Tous doivent réussir »

« J’envoie trois requêtes API.
Si toutes reviennent avec succès → parfait.
Si une seule échoue → tout s’écroule. »

Promise.all([
  fetchUser(),
  fetchPosts(),
  fetchComments()
])
.then(res => console.log("Toutes réussies :", res))
.catch(() => console.log("Une seule erreur → tout échoue."));

Très utilisé dans les grands projets — mais risqué.


⚡ 6) Promise.race() : « Le premier qui répond gagne »

Comme une course.

La première Promise qui renvoie une réponse est utilisée.

Promise.race([
  fetchSlowUser(),
  fetchFastUser()
]).then(res => console.log("Premier :", res));


⚡ 7) Promise.any() : « Tant qu’un seul fonctionne, ça suffit »

Renvoie la première Promise réussie.
Si toutes échouent → lance un AggregateError.

Promise.any([
  fetchFail1(),
  fetchFail2(),
  fetchSuccess()
]).then(res => console.log("Gagnant :", res));


⚡ 8) Erreurs les Plus Courantes avec les Promises

1) Oublier return

Mauvais :

.then(() => {
  doSomething();
})

Correct :

.then(() => {
  return doSomething();
})


2) Oublier await

Mauvais :

const data = fetchData(); // Renvoie une Promise

Correct :

const data = await fetchData();


3) Pas de try/catch

Une fonction async sans try/catch = catastrophe.


⚡ 9) Tableau d’Analogies avec la Vie Réelle

JavaScriptVie Réelle
pending« Le colis est en route. »
fulfilled« Colis livré. »
rejected« Colis retourné. »
then« Résultat reçu. »
catch« Un problème est survenu. »
finally« Livraison terminée. »

⚡ 10) Mini Application : “Simulateur de Livraison de Messages”

Exemple complet : Promise + async/await + gestion des erreurs.

function sendMessage(text) {
  return new Promise((resolve, reject) => {
    const delivered = Math.random() > 0.3;

    setTimeout(() => {
      if (delivered) {
        resolve(`Message délivré : "${text}"`);
      } else {
        reject("Message non délivré.");
      }
    }, 1000);
  });
}

async function simulate() {
  try {
    const msg1 = await sendMessage("Salut !");
    console.log(msg1);

    const msg2 = await sendMessage("Comment ça va ?");
    console.log(msg2);

    const msg3 = await sendMessage("On se voit ?");
    console.log(msg3);
  } catch (err) {
    console.log("Erreur :", err);
  } finally {
    console.log("Simulation terminée.");
  }
}

simulate();

Cette mini-application montre toute la logique des Promises.


⚡ 11) Conseils Professionnels

Privilégie async/await
Plus propre, moderne, simple à déboguer.

Utilise Promise.all pour les opérations parallèles
Gain de temps énorme.

Toujours gérer les erreurs
Avec then/catch ou try/catch.

Évite les chaînes de Promises trop longues
Sinon → spaghetti code.

Indispensables pour les opérations API


🎉 CONCLUSION

Tu comprends maintenant :

✔ Ce qu’est une Promise
✔ Comment elle fonctionne
✔ Ses différents états
✔ then – catch – finally
✔ async/await
✔ Les méthodes pour requêtes parallèles
✔ Les analogies du monde réel
✔ Une simulation complète
✔ Les meilleures pratiques

Tu peux désormais gérer avec confiance le merveilleux chaos asynchrone de JavaScript.

Comments

No comments yet. Why don’t you start the discussion?

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir