JavaScript Promise是什么

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

Promise有3种状态：

Pending - Promise被解析或拒绝之前的初始状态。
Fulfilled - 表示异步操作成功完成并产生一个值的状态。
Rejected - 表示异步操作失败并产生一个错误的状态。

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

示例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>

输出

结果将如下图所示。

JavaScript Promise是什么

示例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>