JavaScript中的Promise是什么？

在JavaScript中，Promise可以用来简化异步编程，使处理异步操作（如I/O操作或与外部系统或机器通信）更容易。Promise是表示异步操作最终完成或失败及其结果值的對象。它们提供了一种简单的方法来处理异步代码，使我们能够编写更清晰、更易读的代码。在本教程中，我们将了解JavaScript中的Promise是什么，以及如何使用它们将异步编程行为融入我们的控制流。

Promise有三种状态：

  • 等待中 - Promise在被resolve或reject之前的初始状态。

  • 已完成 - 表示异步操作成功完成的状态，产生一个值。

  • 已拒绝 - 表示异步操作失败的状态，产生一个错误。

让我们来看一些例子来更好地理解这个概念：

示例1 - 使用.then/.catch语法

在这个例子中，我们将：

  • 创建一个返回Promise的performAsyncTask()函数。

  • 在Promise的主体中，我们将创建一个异步任务，如果数字大于0.5，则用随机数解析Promise；否则，用错误消息拒绝Promise。

文件名 - index.html

<html>
<head>
   <title>What are Promises in JavaScript?</title>
   <script>
      function performAsyncTask() {
         return new Promise((resolve, reject) => {
            setTimeout(() => {
               const randomNumber = Math.random();
               if (randomNumber > 0.5) {
                  resolve(randomNumber);
               } else {
                  reject("Failed to perform the task.");
               }
            }, 2000);
         });
      }

      performAsyncTask()
      .then((result) => {
         console.log("Task completed successfully. Result: " + result);
      })
      .catch((error) => {
         console.log("Task failed. Error: " + error);
      });
   </script>
</head>
<body>
   <h1>What are Promises in JavaScript?</h1>
</body>
</html>

Learn JavaScript in-depth with real-world projects through our JavaScript certification course. Enroll and become a certified expert to boost your career.

输出

结果将类似于下面的图片。

示例2 - 使用async/await语法

在这个例子中，我们将：

  • 创建一个返回Promise的fetchData()函数。

  • 在Promise的主体中，我们将创建一个异步任务，在2秒延迟后，用包含示例数据的对象解析Promise。

文件名 - index.html

<html>
<head>
   <title>What are Promises in JavaScript?</title>
   <script>
      function fetchData() {
         return new Promise((resolve) => {
            setTimeout(() => {
               resolve({ data: "Sample data" });
            }, 2000);
         });
      }

      async function getData() {
         try {
            const result = await fetchData();
            console.log("Data: ", result.data);
         } catch (error) {
            console.log("Error: ", error);
         }
      }

      getData();
   </script>
</head>
<body>
   <h1>What are Promises in JavaScript?</h1>
</body>
</html>

输出

结果将类似于下面的图片。

结论

总而言之，Promise是JavaScript中一个重要的特性，它简化了异步编程。它们是表示异步操作最终完成或失败及其结果值的對象。我们学习了使用不同方法的JavaScript中的Promise，并通过一些例子进行了说明。

更新于：2023年8月16日

666 次浏览

启动你的职业生涯

通过完成课程获得认证

开始学习
广告