目录
代码示例
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() 方法，我们可以处理异步操作的结果，不管是成功还是失败。这使得异步编程更加清晰和可控。