Les Promesses JS : Simplifier l'asynchrone avec élegance
JavaScript Promesses Asynchrone Développement Web Async/Await

Les Promesses JS : Simplifier l'asynchrone avec élegance

26 janvier 2025 4 min de lecture
15

Les promesses en JavaScript révolutionnent la gestion de l’asynchrone en rendant le code plus lisible et élégant. Comprendre leur fonctionnement et adopter async/await te permettra de transformer ton expérience de développement, loin des pièges du callback hell.

Introduction

Quand on commence à coder en JavaScript, on entend souvent parler de promesses, mais leur fonctionnement peut sembler flou. Pourtant, comprendre les promesses est indispensable, car elles sont au cœur de tout ce qui est asynchrone : appels API, lecture de fichiers, timers, etc.

Dans cet article, nous allons décomposer ce concept clé en trois parties :

  1. Ce qu’est une promesse.
  2. Comment l’utiliser.
  3. Comment rendre ton code asynchrone plus lisible et élégant grâce à async et await.

Qu’est-ce qu’une Promesse en JavaScript ?

Une promesse est un objet représentant l’éventuelle réussite ou échec d’une opération asynchrone. En d’autres termes, une promesse te permet de dire :

“Je te promets que je vais finir cette tâche, et je te dirai ce qu’il s’est passé dès que ce sera terminé.”

Les états d’une promesse

Une promesse peut être dans l’un des trois états suivants :

  • Pending (en attente) : La tâche asynchrone est en cours.
  • Fulfilled (réalisée) : La tâche a été accomplie avec succès.
  • Rejected (rejetée) : La tâche a échoué.

Exemple d’une promesse simple

let maPromesse = new Promise((resolve, reject) => {
  let estTravaille = true; // Change cette valeur pour tester

  if (estTravaille) {
    resolve("Le travail est terminé !");
  } else {
    reject("Le travail a échoué.");
  }
});

maPromesse
  .then((resultat) => {
    console.log(resultat); // "Le travail est terminé !" si réussi
  })
  .catch((erreur) => {
    console.log(erreur); // "Le travail a échoué." si rejeté
  });

Les méthodes principales

  • resolve() : Utilisée pour marquer une tâche comme réussie.
  • reject() : Utilisée pour indiquer un échec.
  • then() : Pour définir ce qui doit arriver quand la promesse est réussie.
  • catch() : Pour définir ce qui doit arriver en cas d’échec.

Pourquoi Utiliser des Promesses ?

Les promesses sont particulièrement utiles pour gérer les tâches asynchrones sans tomber dans le “callback hell”.

Exemple de “callback hell”

getData(function(response1) {
  processData(response1, function(response2) {
    saveData(response2, function(response3) {
      console.log("Données sauvegardées");
    });
  });
});

Avec des promesses

Voici comment le même code devient plus lisible avec des promesses :

getData()
  .then(response1 => processData(response1))
  .then(response2 => saveData(response2))
  .then(() => console.log("Données sauvegardées"))
  .catch(error => console.log("Une erreur est survenue : ", error));

Comme tu peux le constater, l’enchaînement est beaucoup plus fluide et maintenable !

async et await : Le Sauveur des Promesses

Bien que les promesses rendent le code asynchrone plus lisible, async et await permettent de simplifier davantage l’écriture de ces opérations.

async

Lorsque tu utilises async devant une fonction, cela signifie que cette fonction retournera une promesse automatiquement.

await

await est utilisé à l’intérieur des fonctions marquées async. Il permet d’attendre la résolution d’une promesse de manière synchrone.

Exemple avec async et await

async function monTravail() {
  try {
    let resultat = await maPromesse;
    console.log(resultat); // "Le travail est terminé !" si réussi
  } catch (erreur) {
    console.log(erreur); // "Le travail a échoué." si rejeté
  }
}

monTravail();

Avec async et await, le code devient beaucoup plus simple et proche d’un code synchrone, tout en conservant les avantages de l’asynchrone.

Conclusion

Les promesses en JavaScript sont un excellent moyen de gérer le code asynchrone de manière élégante et lisible. Grâce à elles :

  • Tu peux mieux organiser et enchaîner les actions asynchrones.
  • Avec async et await, ton code devient encore plus clair et proche du synchrone.

Si tu n’as pas encore adopté les promesses dans ton code, il est temps de les essayer. Une fois maîtrisées, elles deviennent indispensables pour écrire du JavaScript moderne et maintenable.

Cet article vous a plu ?
Plus d'articles →