Promise_简单介绍

最新推荐文章于 2025-12-17 16:41:30 发布

原创最新推荐文章于 2025-12-17 16:41:30 发布 · 160 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

Promise

个人感觉有点像Java中的多线程
表示一个异步操作的最终完成（或失败）以及其结果值。它有三种状态：
- Pending（进行中）：初始状态，表示操作尚未完成。
- Fulfilled（已成功）：表示操作成功完成，并返回了结果。
- Rejected（已失败）：表示操作失败，并返回了错误信息。

下面是一个简单的例子：对随机数校验是否为偶数

是则会调用resolve方法，并返回数字
否则会调用reject方法，并返回数字

当我们通过isEven对象的then或catch来获取Promise的异步结果时，会根据Promise调用的resolve或reject来区分成功或者失败

假设随机数是12，那么Promise中会调用resolve方法, 我们在控制台则会看到输出"12 是偶数"
假设随机数是13，那么Promise中会调用reject方法, 我们在控制台则会看到输出"13 不是偶数"

// 创建一个 Promise，生成随机数并判断是否为偶数
console.log('Promise');
const isEven = new Promise((resolve, reject) => {
  const randomNumber = Math.floor(Math.random() * 100); // 生成 0 到 99 的随机数
  console.log(`生成的随机数是: ${randomNumber}`);
  
  if (randomNumber % 2 === 0) {
    resolve(`${randomNumber}`); // 如果是偶数，调用 resolve
  } else {
    reject(`${randomNumber}`); // 如果不是偶数，调用 reject
  }
});
console.log('start');
// 使用 .then 和 .catch 处理结果
isEven.then((result) => {
    console.log(result + '是偶数'); // 输出 "XX 是偶数"
  }).catch((err) => {
    console.error(err + '不是偶数'); // 输出 "XX 不是偶数"
  });

console.log('end');

现在我给他加上了一些log 那么当随机数是2的时候会输出

Promise
生成的随机数是: 2
start
end
2是偶数

这种输出结果是是因为如下核心机制：

同步代码优先执行：
- Promise构造器内的代码是同步的，但resolve/reject的处理（.then/.catch）是异步的。
- 即使没有异步操作，回调也会被推迟到微任务队列。
事件循环分层：
- 微任务队列：包含Promise回调、MutationObserver等，优先级高于宏任务。
- 宏任务队列：包含setTimeout、DOM事件等。

eg:

// 同步代码 > 微任务 > 宏任务
console.log('同步代码1');
Promise.resolve().then(() => console.log('微任务'));
setTimeout(() => console.log('宏任务'), 0);
console.log('同步代码2');

/* 
输出顺序：
同步代码1 → 同步代码2 → 微任务 → 宏任务
 */