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

深入理解Promise与异步编程

原创已于 2025-09-16 21:22:16 修改 · 1.1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2025-09-16 21:10:59 首次发布

JavaScript 同时被 2 个专栏收录

26 篇文章

订阅专栏

ES6-13

11 篇文章

订阅专栏

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

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 的工作机制

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