一、使用Promise管理异步任务的基础步骤
<!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管理异步任务*/// 1、创建Promise对象const p = new Promise((resolve,reject) => {// 2、执行异步代码setTimeout(() => {resolve('模拟AJAX请求-成功的结果')},2000)})// 3、获取结果p.then(result => {console.log(result);})</script>
</body></html>运行结果如下：
.catch：处理失败的结果（对应 reject），代码如下：
<!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管理异步任务*/// 1、创建Promise对象const p = new Promise((resolve,reject) => {// 2、执行异步代码setTimeout(() => {// resolve('模拟AJAX请求-成功的结果')reject(new Error('模拟AJAX请求-失败的结果'));},2000)})// 3、获取结果p.then(result => {console.log(result);}).catch(error => {console.log(error)})</script>
</body></html>运行结果如下：
二、Promise 三种状态
Promise 对象在生命周期中只会处于以下三种状态之一，且状态的转换有严格的规则：
1. pending（等待 / 进行中）
- 含义：这是 Promise 的初始状态，表示异步操作还未完成，结果尚未确定。
- 特点：
- 刚创建 Promise 时，默认处于这个状态；
- 此时既不是成功，也不是失败。
- 示例：
// 刚创建的 Promise 处于 pending 状态
const p = new Promise((resolve, reject) => {// 异步操作还在执行中（比如定时器还没到时间）setTimeout(() => {}, 1000);
});
console.log(p); // 控制台会显示 Promise { <pending> }使用一下实战的代码，如下：
<!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管理异步任务*/// 1、创建Promise对象const p = new Promise((resolve,reject) => {// 2、执行异步代码setTimeout(() => {// resolve('模拟AJAX请求-成功的结果')reject(new Error('模拟AJAX请求-失败的结果'));},2000)})console.log(p);// 3、获取结果p.then(result => {console.log(result);}).catch(error => {console.log(error)})</script>
</body></html>运行结果如下
以上截图要在2秒内打开 ，可以看到是“pending”状态。
如果是在2s之后打开的，就是另一种状态了。
<!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管理异步任务*/// 1、创建Promise对象const p = new Promise((resolve,reject) => {// Promose对象创建时，此处的代码就会立即执行，测试如下：console.log('Promise 代码已执行了！')// 2、执行异步代码setTimeout(() => {// resolve('模拟AJAX请求-成功的结果')reject(new Error('模拟AJAX请求-失败的结果'));},5000)})console.log(p);// 3、获取结果p.then(result => {console.log(result);}).catch(error => {console.log(error)})</script>
</body></html>运行结果如下
可以看到，
console.log('Promise 代码已执行了！'上面 这段代码先于
console.log(p);显示出来了，说明Promise对象创建的时候里面的代码就执行了的。
2. fulfilled（已成功 / 已兑现）
- 含义：表示异步操作成功完成，Promise 会将操作结果传递出去。
- 触发条件：在 Promise 执行器函数中调用
resolve()方法时，状态会从pending转为fulfilled。 - 特点：状态一旦变为
fulfilled，就永久固定，不会再改变。
<!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管理异步任务*/// 1、创建Promise对象const p = new Promise((resolve,reject) => {// Promose对象创建时，此处的代码就会立即执行，测试如下：console.log('Promise 代码已执行了！')// 2、执行异步代码setTimeout(() => {resolve('模拟AJAX请求-成功的结果')// reject(new Error('模拟AJAX请求-失败的结果'));},2000)})console.log(p);// 3、获取结果p.then(result => {console.log(result);}).catch(error => {console.log(error)})</script>
</body></html>运行结果如下
3. rejected（已失败 / 已拒绝）
- 含义：表示异步操作执行失败，Promise 会将失败的原因（错误信息）传递出去。
- 触发条件：在 Promise 执行器函数中调用
reject()方法，或执行器内部抛出未捕获的错误时，状态会从pending转为rejected。 - 特点：状态一旦变为
rejected，同样永久固定，不会再改变。
<!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管理异步任务*/// 1、创建Promise对象const p = new Promise((resolve,reject) => {// Promose对象创建时，此处的代码就会立即执行，测试如下：console.log('Promise 代码已执行了！')// 2、执行异步代码setTimeout(() => {// resolve('模拟AJAX请求-成功的结果')reject(new Error('模拟AJAX请求-失败的结果'));},2000)})console.log(p);// 3、获取结果p.then(result => {console.log(result);}).catch(error => {console.log(error)})</script>
</body></html>运行结果如下
状态转换的核心规则
Promise 的状态转换是单向且不可逆的，只有两种合法的转换路径：
pending→fulfilled（异步操作成功）pending→rejected（异步操作失败）
注意：
- 不存在
fulfilled→rejected、rejected→fulfilled这类反向转换； - 也不存在
fulfilled/rejected转回pending的情况； - 即使多次调用
resolve()或reject()，也只有第一次调用会生效（状态一旦改变，后续调用无效）。
示例验证状态不可逆：
const p = new Promise((resolve, reject) => {resolve("第一次调用"); // 状态转为 fulfilledreject("后续调用无效"); // 无效果，状态已固定
});
p.then(res => console.log(res)) // 输出：第一次调用.catch(err => console.error(err)); // 不会执行