在 JavaScript 中使用 wait 时通过 catch 处理 Promise 拒绝-js教程-PHP中文网

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 24, 2023 pm 04:57 PM

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

在 JavaScript 中，用户可以使用 Promise 执行特定操作。例如，我们可以创建使用 API 从数据库获取数据的 Promise。如果 Promise 成功从数据库获取数据，则意味着 Promise 成功，否则 Promise 出错，则意味着 Promise 被拒绝。

让我们先看看创建 Promise 的语法。

语法

用户可以按照以下语法在 JavaScript 中创建 Promise。

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

在上面的语法中，我们使用带有“new”关键字的 Promise() 构造函数来创建 Promise。

示例

在下面的示例中，我们创建了两个不同的 Promise。此外，我们已经解决并拒绝了它们。

用户可以在下面的代码中看到我们如何管理 testPromise1，因为它已成功解决。逻辑部分附带第二个承诺，即我们需要使用 catch 块来处理错误。在输出中，用户可以观察到 testPromise2 的 Promise 消息是从 catch 块中打印出来的。

<html>
<body>
   <h2 id="i-Promise-i-in-JavaScript"><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>

将 Promise 与异步函数和await关键字结合使用

用户已经学会了创造承诺。此外，还学会了使用 catch 块处理已解决和已拒绝的承诺。

现在，我们将学习使用带有异步函数和await关键字的promise。因此，我们必须使用 try-catch 块来处理被拒绝的 Promise 中的错误。

异步函数允许我们在程序中并行执行多个任务。我们可以定义函数后跟async关键字以使其异步。之后，我们可以在函数内使用await关键字来等待promise结果。有时，如果没有从 Promise 中获得结果，我们就无法在函数中执行其他任务。因此，我们必须等待使用 await 关键字可以获得的结果。

语法

当我们使用带有await关键字的promise时，用户可以按照下面的语法使用try-catch块来处理promise错误。

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
   }
}

在上面的语法中，我们使用 async 关键字使函数异步，并使用 await 关键字等待 Promise 被履行或拒绝。

示例

在下面的示例中，我们创建了异步函数。此外，我们还创建了 promise1() 函数，它返回一个带有拒绝的承诺。在异步函数中，我们使用await 关键字调用了promise1() 函数，并且当promise 被拒绝时，控制权转到catch 块。

<html>
<body>
   <h3 id="Handling-the-i-Promise-rejection-using-catch-block-i-While-using-await-keyword-in-JavaScript">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>

示例

在下面的示例中，我们创建了与上面示例中创建的相同的 Promise，但是我们在拒绝 Promise 时添加了计时器。

当用户点击“execute Promise”按钮时，它会执行executePromise()函数。在executePromise()函数中，我们使用await关键字调用timerPromise()，并且timerPromise()拒绝承诺直到5秒，直到该函数等待继续前进。

<html>
<body>
   <h3 id="Handling-the-i-Promise-rejection-using-catch-block-i-While-using-await-keyword-and-timer-in-JavaScript">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>

在上面的输出中，用户可以观察到，当他们单击“执行 Promise”按钮时，5 秒后，他们会看到来自 catch 块的错误消息，因为 Promise 需要 5 秒才能被拒绝。

以上是在 JavaScript 中使用 wait 时通过 catch 处理 Promise 拒绝的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除

JavaScript数据类型：浏览器和nodejs之间是否有区别？May 14, 2025 am 12:15 AM

JavaScript核心数据类型在浏览器和Node.js中一致，但处理方式和额外类型有所不同。1)全局对象在浏览器中为window，在Node.js中为global。2)Node.js独有Buffer对象，用于处理二进制数据。3)性能和时间处理在两者间也有差异，需根据环境调整代码。

JavaScript评论：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：开发人员的比较分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要区别在于类型系统和应用场景。1.Python使用动态类型，适合科学计算和数据分析。2.JavaScript采用弱类型，广泛用于前端和全栈开发。两者在异步编程和性能优化上各有优势，选择时应根据项目需求决定。

Python vs. JavaScript：选择合适的工具May 08, 2025 am 12:10 AM

选择Python还是JavaScript取决于项目类型：1)数据科学和自动化任务选择Python；2)前端和全栈开发选择JavaScript。Python因其在数据处理和自动化方面的强大库而备受青睐，而JavaScript则因其在网页交互和全栈开发中的优势而不可或缺。

Python和JavaScript：了解每个的优势May 06, 2025 am 12:15 AM

Python和JavaScript各有优势，选择取决于项目需求和个人偏好。1.Python易学，语法简洁，适用于数据科学和后端开发，但执行速度较慢。2.JavaScript在前端开发中无处不在，异步编程能力强，Node.js使其适用于全栈开发，但语法可能复杂且易出错。

JavaScript的核心：它是在C还是C上构建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1）javascriptwasdesignedAsalightweight，解释edganguageforwebbrowsers.2）Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers，典型地提示。

JavaScript应用程序：从前端到后端May 04, 2025 am 12:12 AM

JavaScript可用于前端和后端开发。前端通过DOM操作增强用户体验，后端通过Node.js处理服务器任务。1.前端示例：改变网页文本内容。2.后端示例：创建Node.js服务器。

Python vs. JavaScript：您应该学到哪种语言？May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统：1)职业发展：Python适合数据科学和后端开发，JavaScript适合前端和全栈开发。2)学习曲线：Python语法简洁，适合初学者；JavaScript语法灵活。3)生态系统：Python有丰富的科学计算库，JavaScript有强大的前端框架。

See all articles