完整教程：一篇读懂Pormise！！【前端ES6】

测试说我们程序员就爱说“不应该啊，我本地没问题呀”…

目录

• promise
• • 1.promise的定义
  • 2. Promise 的创建
  • 3. Promise 的方法
  • • 3.1 实例方法
    • 3.2 静态方法
  • 4. Promise 链式调用
  • 5. Promise 的工作机制
  • 6.举个栗子
  • 7. 总结

promise

==Promise 是 JavaScript 中用于处理异步操作的对象，它用来表示一个 可能现在、将来或者永远不会结束的异步操作，并且能在异步操作完成后得到结果或捕获错误。==通过 Promise，可以更加清晰地处理异步代码，避免回调地狱。

1.promise的定义

Promise 其实就是异步操作的占位符，它有三种状态：

• Pending（等待中）：Promise 创建时，状态为 Pending，表示异步操作正在进行中。【初始状态】
• Fulfilled（已成功）：如果异步操作成功（即调用 resolve），状态变为 Fulfilled，然后执行 .then(onFulfilled) 回调。【成功】
• Rejected（已失败）：如果异步操作失败（即调用 reject），状态变为 Rejected，然后执行 .catch(onRejected) 或 .then(null, onRejected) 回调。【失败】

状态	含义	能否改变
Pending（等待中）	异步操作正在进行	可以变为 Fulfilled 或 Rejected
Fulfilled（已成功）	异步操作成功完成	不可再改变
Rejected（已失败）	异步操作失败	不可再改变

注意：一旦状态从 Pending 变为 Fulfilled 或 Rejected，就 不可再改变。

2. Promise 的创建

使用 new Promise(executor) 创建一个 Promise：

const promise = new Promise((resolve, reject) =>
{
// 异步操作
const success = true;
if (success) {
resolve("操作成功");
// 变为 Fulfilled
} else {
reject("操作失败");
// 变为 Rejected
}
});

• executor 是立即执行的函数
• resolve(value)：将状态变为 Fulfilled，并返回结果
• reject(reason)：将状态变为 Rejected，并返回错误

3. Promise 的方法

3.1 实例方法

then(onFulfilled, onRejected)

• 当 Promise 状态为 Fulfilled 时，执行 onFulfilled。
• 当 Promise 状态为 Rejected 时，执行 onRejected（可选）。

promise.then(
result => console.log("成功:", result),
error => console.error("失败:", error)
);

catch(onRejected)

• 用于捕获失败（Rejected）状态。
• 等价于 then(null, onRejected)。

promise
.then(result => console.log(result))
.catch(error => console.error(error));

finally(callback)

• 无论 Promise 成功或失败，都会执行 callback。
• 不会修改 Promise 的值。

promise
.finally(() => console.log("操作完成"));

3.2 静态方法

方法	功能
Promise.resolve(value)	返回一个已成功的 Promise
Promise.reject(reason)	返回一个已失败的 Promise
Promise.all(promises)	等待所有 Promise 完成，全部成功才返回结果，否则失败
Promise.race(promises)	只要第一个 Promise 完成，就返回结果或错误
Promise.allSettled(promises)	等待所有 Promise 完成，不管成功或失败都返回状态

Promise.all([
Promise.resolve(1),
Promise.resolve(2),
Promise.resolve(3)
]).then(values => console.log(values));
// [1,2,3]

4. Promise 链式调用

• then 方法返回一个新的 Promise，可以连续调用。
• 链式调用可以顺序处理异步操作，避免回调地狱。

new Promise((resolve, reject) =>
{
resolve(1);
})
.then(result =>
{
console.log(result);
// 1
return result + 1;
})
.then(result =>
{
console.log(result);
// 2
});

5. Promise 的工作机制

1. 创建 Promise → 状态为 Pending
2. 执行异步操作
3. 操作成功 → 调用 resolve → 状态变为 Fulfilled
4. 操作失败 → 调用 reject → 状态变为 Rejected
5. then / catch / finally → 注册回调函数
6. 状态改变后 → 执行对应的回调函数

Promise 内部采用微任务队列（microtask）机制，回调会在当前同步代码执行完毕后才执行。

6.举个栗子

function asyncTask(flag) {
return new Promise((resolve, reject) =>
{
setTimeout(() =>
{
if (flag) {
resolve("任务完成");
} else {
reject("任务失败");
}
}, 1000);
});
}
asyncTask(true)
.then(result => console.log(result) // 任务完成 ) 
.catch(error => console.error(error) // 任务失败 )
.finally(() => console.log("操作结束"));

输出：

任务完成
操作结束

7. 总结

• Promise 是异步编程的解决方案
• 有三种状态：Pending、Fulfilled、Rejected
• Promise 的状态一旦改变，不能再改变（Pending -> Fulfilled 或 Rejected）
• 提供 then、catch、finally 方法处理结果（then() 用于处理成功的回调，catch() 用于处理失败的回调。）
• 支持链式调用和静态方法处理多个异步操作
• 内部机制保证状态不可逆，回调异步执行（微任务队列）