当前位置：首页 > news >正文

Promise的三种状态

news 来源：原创 2025/5/23 2:57:29

代码示例

HTML + JavaScript 代码：

代码解释

总结

在 JavaScript 中，Promise 是一种异步编程的解决方案，它用于表示异步操作的最终完成（或失败）及其结果值。Promise 主要有三种状态：

Pending（待定）: 初始状态，异步操作还未完成。
Fulfilled（已兑现）: 异步操作成功完成。
Rejected（已拒绝）: 异步操作失败。

理解这些状态对于正确使用 Promise 非常重要。在这篇文章中，我们将通过代码来演示 Promise 的状态转换及其使用方法。

代码示例

HTML + JavaScript 代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Promise的三种状态</title> 
</head>

<body>
  <script>
    // 创建一个Promise实例
    const p = new Promise((resolve, reject) => {

      console.log('Promise对象在内部运行中');

      // 使用setTimeout模拟异步操作，例如AJAX请求
      setTimeout(() => {
        // resolve('模拟AJAX请求-成功'); // 如果请求成功，调用resolve，并传递成功的结果
        reject(new Error('模拟AJAX请求-失败')); // 如果请求失败，调用reject，并传递一个错误对象
      }, 5000); // 设置延迟时间为5000毫秒（5秒）
    });
    console.log(p);

    // 使用then方法处理Promise成功的情况
    p.then(result => {
      console.log(result); // 如果Promise成功，result会接收到resolve传递的值，并在这里打印
    });

    // 使用catch方法处理Promise失败的情况
    p.catch(error => {
      console.log(error); // 如果Promise失败，error会接收到reject传递的值，并在这里打印
    });
  </script>
</body>

</html>

代码解释

创建 Promise 实例：
- 通过 new Promise() 创建一个 Promise 实例，该实例包含两个参数：resolve 和 reject。这两个参数分别代表操作成功时的回调和操作失败时的回调。
模拟异步操作：
- 使用 setTimeout 模拟一个异步操作（比如 AJAX 请求）。这个操作将在 5 秒后完成。通过 resolve() 方法模拟请求成功，通过 reject() 方法模拟请求失败。
状态的变化：
- 初始时，Promise 处于 "Pending"（待定）状态。
- 如果异步操作成功，resolve() 被调用，Promise 转为 "Fulfilled"（已兑现）状态。
- 如果异步操作失败，reject() 被调用，Promise 转为 "Rejected"（已拒绝）状态。
处理结果：
- .then() 用于处理 Promise 成功的情况。它接收 resolve() 返回的值并进行处理。
- .catch() 用于处理 Promise 失败的情况。它接收 reject() 返回的错误对象并进行处理。
执行流程：
- 页面加载时，Promise 被创建并打印在控制台中。由于我们模拟了请求失败，5 秒后 reject() 被调用，catch() 中的回调函数会被执行，输出错误信息。

总结

通过这个示例，我们可以清楚地看到 Promise 的三种状态以及如何使用 resolve() 和 reject() 来控制 Promise 的状态转换。通过 .then() 和 .catch() 方法，我们可以处理异步操作的结果，不管是成功还是失败。这使得异步编程更加清晰和可控。