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

一篇读懂Pormise！！【前端ES6】

news 2025/9/17 8:03:56

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

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); // 1return result + 1;
})
.then(result => {console.log(result); // 2
});

5. Promise 的工作机制

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

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("操作结束"));