Comprendre les promesses en JavaScript : Une introduction complète

Les promesses en JavaScript sont des objets couramment utilisés pour gérer l’exécution de code asynchrone. Elles permettent une gestion plus élégante des opérations asynchrones par rapport aux traditionnels callbacks, facilitant ainsi la lecture et le maintien du code.

Dans cet article, nous allons explorer ce qu’est une promesse, comment elle fonctionne, et fournir plusieurs exemples de code pour illustrer son utilisation détaillée.

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

Une promesse est un objet représentant la valeur éventuelle d’une opération asynchrone terminée ou l’échec de celle-ci. Elle possède trois états possibles :

• ⏳ Pending : L’opération est en cours
• ✅ Fulfilled : L’opération s’est terminée avec succès
• ❌ Rejected : L’opération a échoué

Cet état change au fur et à mesure que l’opération se déroule. La syntaxe new Promise() permet de créer une nouvelle promesse en JavaScript.

Syntaxe de base

Pour créer une promesse, on utilise la syntaxe suivante :

    
      const myPromise = new Promise((resolve, reject) => {
        // code asynchrone ici
        if (/* condition */) {
          resolve('Success');
        } else {
          reject('Error');
        }
      });
    
  

La fonction passée au constructeur Promise reçoit deux arguments : resolve et reject, qui sont des fonctions utilisées respectivement pour indiquer une réussite ou un échec.

Utilisation des promesses

Voyons comment utiliser une promesse dans un exemple concret. Supposons que nous voulons effectuer une requête HTTP et traiter la réponse :

    
      function fetchData(url) {
        return new Promise((resolve, reject) => {
          const xhr = new XMLHttpRequest();
          xhr.open('GET', url);
          xhr.onload = () => {
            if (xhr.status === 200) {
              resolve(xhr.responseText);
            } else {
              reject('Failed to fetch data');
            }
          };
          xhr.onerror = () => reject('Network error');
          xhr.send();
        });
      }

      fetchData('https://api.example.com/data')
        .then(data => console.log('Data   :', data))
        .catch(error => console.error('Error   :', error));
    
  

Ici, la fonction fetchData retourne une promesse qui fait une requête HTTP. Si la requête réussit, resolve est appelé avec la réponse. Sinon, reject est invoqué.

Chaînage de promesses

L’un des avantages majeurs des promesses est le chaînage. Cela permet de structurer le code en séquences lisibles d’opérations dépendantes :

    
      fetchData('https://api.example.com/data')
        .then(data => {
          console.log('First call data   :', data);
          return fetchData('https://api.example.com/more-data');
        })
        .then(moreData => console.log('Second call data   :', moreData))
        .catch(error => console.error('Error   :', error));
    
  

Le deuxième .then() ne sera exécuté que si la première requête réussit. Si une promesse dans la chaîne est rejetée, .catch() interceptera l’erreur.

Gestion des erreurs

La gestion des erreurs dans le contexte des promesses se réalise principalement via la méthode .catch(). Celle-ci est appelée quand une erreur survient à n’importe quel point de la chaîne de promesses :

    
      fetchData('https://api.example.com/invalid-url')
        .then(data => {
          // This block will not execute
        })
        .catch(error => console.error('Caught an error   :', error));
    
  

En utilisant .catch(), il est possible de centraliser la gestion des erreurs, rendant le code plus propre et plus maintenable.

Comparaison entre callbacks et promesses

Pour mieux comprendre les bénéfices des promesses, comparons-les aux simples callbacks.

📌 Critère	👍 Promesses	👎 Callbacks
Simplicité	Faciles à lire et à suivre grâce au chaînage	Peuvent entraîner la « callback hell »
Gestion des erreurs	Uniforme avec .catch()	Souvent dispersée partout
Contrôle de flux	Plus fluide et synchronisé	Moins flexible

Comme nous pouvons le constater : ✅ Les promesses offrent une meilleure solution pour gérer le code asynchrone. Pour approfondir vos connaissances sur d’autres structures de contrôle de flux, vous pouvez consulter les boucles (for, foreach, each) en javascript.

FAQs sur les promesses en JavaScript

Comment créer une promesse en JavaScript?

Quelle est la syntaxe de base ?

La création d’une promesse se fait en utilisant le constructeur new Promise(), en lui passant une fonction avec les paramètres resolve et reject :

          
            const maPromesse = new Promise((resolve, reject) => {
              // Faire quelque chose d’asynchrone
              if (/* succès */) {
                resolve(valeur);
              } else {
                reject(erreur);
              }
            });
          
        

Quels sont les états d’une promesse?

Quels transitions peut subir une promesse ?

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

• ⏳ Pending : en attente, non résolue ni rejetée
• ✅ Fulfilled : complétée avec succès
• ❌ Rejected : échouée

Comment gére-t-on les erreurs avec les promesses ?

Quel rôle joue la méthode .catch()?

.catch() permet d’intercepter et de gérer les erreurs survenant à n’importe quel point de la chaîne de promesses. Cette approche centralisée simplifie grandement la manipulation des erreurs :

          
            promise.then(result => {
              // faire quelque chose
            }).catch(error => {
              // gérer l'erreur ici
            });