Gestion des rejets de promesse avec catch lors de l'utilisation d'attente en JavaScript-js tutoriel-php.cn

Gestion des rejets de promesse avec catch lors de l'utilisation d'attente en JavaScript

WBOY

Libérer： 2023-08-24 16:57:02

avant

1256 Les gens l'ont consulté

在 JavaScript 中使用 wait 时通过 catch 处理 Promise 拒绝

En JavaScript, les utilisateurs peuvent utiliser des promesses pour effectuer des opérations spécifiques. Par exemple, nous pouvons créer une promesse qui utilise une API pour obtenir des données d'une base de données. Si la promesse réussit à obtenir les données de la base de données, cela signifie que la promesse est réussie, sinon si la promesse échoue, cela signifie que la promesse est rejetée.

Examinons d'abord la syntaxe de création d'une promesse.

Grammaire

Les utilisateurs peuvent créer une promesse en JavaScript selon la syntaxe suivante.

let testPromise = new Promise((res, rej) => {
   
   // perform some operation
});

Copier après la connexion

Dans la syntaxe ci-dessus, nous utilisons le constructeur Promise() avec le mot-clé "new" pour créer une promesse.

Exemple

Dans l'exemple ci-dessous, nous créons deux promesses différentes. De plus, nous les avons abordés et rejetés.

Les utilisateurs peuvent voir dans le code ci-dessous comment nous avons géré testPromise1 car il a été résolu avec succès. La partie logique vient avec la deuxième promesse selon laquelle nous devons utiliser un bloc catch pour gérer les erreurs. Dans le résultat, l'utilisateur peut observer que le message Promise de testPromise2 est imprimé à partir du bloc catch.

<html>
<body>
   <h2><i>Promise</i> in JavaScript</h2>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      
      // Creating the promise and resolving it
      let testPromise1 = new Promise((res, rej) => {
         res("The testPromise1 is resolved successfully!");
      });
      
      // rejecting the promise
      let testPromise2 = new Promise((res, rej) => {
         rej("The testPromise2 is Rejected due to error!");
      });
      
      // execute the testPromise1
      testPromise1.then((res) => {
         output.innerHTML += res;
         output.innerHTML += "</br>";
      });
      
      //execute the testPromise2, and use the catch block to handle errors.
      testPromise2
      .then((res) => {
         output.innerHTML += res;
      })
      .catch((error) => {
         output.innerHTML += "Inside the catch block for testPromise2. </br>";
         output.innerHTML += error;
      });
   </script>
</body>
</html>

Copier après la connexion

Utilisez Promise avec les fonctions asynchrones et le mot-clé wait

Les utilisateurs ont appris à créer de l'engagement. De plus, vous avez appris à utiliser les blocs catch pour gérer les promesses résolues et rejetées.

Maintenant, nous allons apprendre à utiliser les promesses avec la fonction async et le mot-clé wait. Par conséquent, nous devons utiliser le bloc try-catch pour gérer les erreurs dans la promesse rejetée.

Les fonctions asynchrones nous permettent d'effectuer plusieurs tâches en parallèle dans notre programme. On peut définir une fonction suivie du mot-clé async pour la rendre asynchrone. Après cela, nous pouvons utiliser le mot-clé await dans la fonction pour attendre le résultat promis. Parfois, sans obtenir le résultat de la promesse, nous ne pouvons pas effectuer d'autres tâches dans la fonction. Il faut donc attendre les résultats qui peuvent être obtenus en utilisant le mot-clé await.

Grammaire

Lorsque nous utilisons promise avec le mot-clé wait, les utilisateurs peuvent utiliser le bloc try-catch pour gérer les erreurs de promesse selon la syntaxe ci-dessous.

async function executePromise() {
   try {
      
      // call the promise, and wait until it is fulfilled!
      await promise1();
   } catch (error) {
      
      // if the promise is rejected, control comes here
   }
}

Copier après la connexion

Dans la syntaxe ci-dessus, nous utilisons le mot-clé async pour rendre la fonction asynchrone et le mot-clé await pour attendre que la promesse soit remplie ou rejetée.

Exemple

Dans l'exemple ci-dessous, nous créons une fonction asynchrone. De plus, nous avons créé la fonction promise1(), qui renvoie une promesse avec un rejet. Dans la fonction asynchrone, nous avons appelé la fonction promise1() en utilisant le mot-clé wait, et lorsque la promesse est rejetée, le contrôle passe au bloc catch.

<html>
<body>
   <h3>Handling the <i>Promise rejection using catch block</i> While using await keyword in JavaScript.</h3>
   <p id = "output"> </p>
   <script> 
      let output = document.getElementById("output");
      
      // rejecting the promise
      let Promise1 = () => {
         return new Promise((res, rej) => {
            rej(new Error(400));
         });
      };
      async function executePromise() {
         try {
            
            // call the promise, and wait until it is fulfilled!
            await Promise1();
         } catch (error) {
            output.innerHTML += "Promise is rejected, and an error message is " + error.message;
         }
      }
      executePromise();
   </script>
</body>
</html>

Copier après la connexion

Exemple

Dans l'exemple ci-dessous, nous créons la même promesse que celle créée dans l'exemple ci-dessus, mais nous ajoutons une minuterie lorsque la promesse est rejetée.

Lorsque l'utilisateur clique sur le bouton "execute Promise", il exécutera la fonction executePromise(). Dans la fonction executePromise(), nous appelons timerPromise() en utilisant le mot-clé wait, et timerPromise() rejette la promesse jusqu'à 5 secondes avant que la fonction n'attende pour avancer.

<html>
<body>
   <h3>Handling the <i>Promise rejection using catch block</i> While using await keyword and timer in JavaScript. </h3>
   <p> Click on the "Execute promise" button and wiat for 5 seconds </p>
   <p id = "output"> </p>
   <button onClick = "executePromise()"> Execute promise </button>
   <script>
      let output = document.getElementById("output");
      
      // rejecting the promise
      let timerPromise = () => {
         return new Promise((res, rej) => {
            setTimeout(
               () => rej(new Error("Promise is rejected after 5 seconds")), 5000
            );
         });
      };
      async function executePromise() {
         try {
            
            // function will not move ahead until the promise is fulfilled.
            await timerPromise();
         } catch (error) {
            output.innerHTML += "Promise is rejected, and an error message is " + error.message;
         }
      }
   </script>
</body>
</html>

Copier après la connexion

Dans la sortie ci-dessus, l'utilisateur peut observer que lorsqu'il clique sur le bouton "Exécuter la promesse", après 5 secondes, il voit un message d'erreur du bloc catch car la promesse prend 5 secondes pour être rejetée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!