CodeGym /Cours /Frontend SELF FR /Chaînes de promesses

Chaînes de promesses

Frontend SELF FR
Niveau 43 , Leçon 2
Disponible

3.1 Création de chaînes de promesses

Chaînes de promesses permettent d'exécuter plusieurs opérations asynchrones de manière séquentielle, en passant le résultat d'une opération à la suivante. Cela rend le code plus lisible et gérable. De plus, les promesses offrent de puissantes possibilités de gestion des erreurs, ce qui permet de créer des applications fiables et résistantes aux pannes.

Concept principal

Une chaîne de promesses est créée en retournant une nouvelle promesse depuis la méthode then. Chaque méthode then retourne une nouvelle promesse, ce qui permet de construire des opérations asynchrones séquentielles.

Exemple d'une simple chaîne de promesses

Dans cet exemple, chaque méthode then exécute son opération et passe le résultat à la méthode then suivante.

JavaScript
    
      const promise = new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve('Step 1 completed');
        }, 1000);
      });

      promise
        .then((result) => {
          console.log(result); // Affichera : Step 1 completed
          return 'Step 2 completed';
        })
        .then((result) => {
          console.log(result); // Affichera : Step 2 completed
          return 'Step 3 completed';
        })
        .then((result) => {
          console.log(result); // Affichera : Step 3 completed
        })
        .catch((error) => {
          console.error(error);
        });
    
  

Exemple de chaîne avec des opérations asynchrones

Dans cet exemple, chaque méthode then attend la fin de l'opération asynchrone avant d'exécuter l'étape suivante :

JavaScript
    
      function asyncOperation(step) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve(`${step} completed`);
          }, 1000);
        });
      }

      asyncOperation('Step 1')
        .then((result) => {
          console.log(result); // Affichera : Step 1 completed
          return asyncOperation('Step 2');
        })
        .then((result) => {
          console.log(result); // Affichera : Step 2 completed
          return asyncOperation('Step 3');
        })
        .then((result) => {
          console.log(result); // Affichera : Step 3 completed
        })
        .catch((error) => {
          console.error(error);
        });
    
  

3.2 Gestion des erreurs dans les chaînes de promesses

La méthode catch est utilisée pour gérer les erreurs dans une chaîne de promesses. Si une erreur survient dans l'une des promesses, elle est transmise à la méthode catch la plus proche. Cela permet de traiter les erreurs de manière centralisée, améliorant ainsi la lisibilité et la maintenance du code.

Exemple de gestion des erreurs

Dans cet exemple, l'erreur survenue dans Step 2 est interceptée par la méthode catch, et les méthodes then suivantes ne sont pas exécutées :

JavaScript
    
      function asyncOperation(step, shouldFail = false) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            if (shouldFail) {
              reject(`${step} failed`);
            } else {
              resolve(`${step} completed`);
            }
          }, 1000);
        });
      }

      asyncOperation('Step 1')
        .then((result) => {
          console.log(result);
          return asyncOperation('Step 2', true); // Cette opération échouera
        })
        .then((result) => {
          console.log(result); // Ce code ne sera pas exécuté
          return asyncOperation('Step 3');
        })
        .then((result) => {
          console.log(result); // Ce code ne sera pas exécuté
        })
        .catch((error) => {
          console.error('Error:', error); // Affichera : Error: Step 2 failed
        });
    
  

Gestion des erreurs à des étapes spécifiques

Parfois, il est nécessaire de gérer les erreurs à des étapes spécifiques de la chaîne sans interrompre l'exécution de toute la chaîne. Pour cela, on peut utiliser des méthodes then et catch imbriquées.

Exemple de gestion d'erreurs à des étapes spécifiques

Dans cet exemple, l'erreur dans Step 2 est gérée localement, et la chaîne continue avec une valeur récupérée :

JavaScript
    
      function asyncOperation(step, shouldFail = false) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            if (shouldFail) {
              reject(`${step} failed`);
            } else {
              resolve(`${step} completed`);
            }
          }, 1000);
        });
      }
            
      asyncOperation('Step 1')
        .then((result) => {
          console.log(result);
          return asyncOperation('Step 2', true).catch((error) => {
            console.warn('Handled error in Step 2:', error);
            return 'Recovered from Step 2 error';
          });
        })
        .then((result) => {
          console.log(result); // Affichera : Recovered from Step 2 error
          return asyncOperation('Step 3');
        })
        .then((result) => {
          console.log(result); // Affichera : Step 3 completed
        })
        .catch((error) => {
          console.error('Error:', error); // Ce code ne sera pas exécuté
        });
    
  

3.3 Utilisation de finally

La méthode finally est utilisée pour exécuter du code indépendamment du fait que la promesse se soit terminée avec succès ou avec une erreur. Cela est utile pour effectuer des actions de nettoyage, comme la libération de ressources.

Exemple d'utilisation de finally :

JavaScript
    
      function asyncOperation(step, shouldFail = false) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            if (shouldFail) {
              reject(`${step} failed`);
            } else {
              resolve(`${step} completed`);
            }
          }, 1000);
        });
      }
      
      asyncOperation('Step 1')
        .then((result) => {
          console.log(result);
          return asyncOperation('Step 2');
        })
        .then((result) => {
          console.log(result);
          return asyncOperation('Step 3');
        })
        .catch((error) => {
          console.error('Error:', error);
        })
        .finally(() => {
          console.log('All operations completed'); // Sera exécuté dans tous les cas
        });
    
  

Dans cet exemple, la méthode finally est exécutée dans tous les cas, qu'il y ait eu une erreur ou non.

Commentaires
TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION