一个小故事彻底讲懂Promise----初学者必看

最新推荐文章于 2025-04-28 10:15:58 发布

電力已充满

最新推荐文章于 2025-04-28 10:15:58 发布

阅读量1.2k

点赞数 40

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_72975727/article/details/138358301

版权

本文介绍了Promise的基本概念，它是处理异步编程的一种方式，通过实例和故事阐述了Promise的三种状态（fulfilled,rejected,pending）、生成机制以及与异步任务的关系。最后通过一个案例加深对Promise的理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、认识Promise

Promise是处理异步编程的方式。Promise对象是一个构造函数，用来生成Promise实例

对Promise的认识可以有以下几种：

（1）Promise有三种状态：成功（fulfilled），失败（rejected），等待（pending）；

（2）当生成Promise实例时，会传入一个执行器（一般是异步函数），执行器中包含resolve、reject两个函数，其中Promise可以调用then方法执行resolve成功函数，调用catch方法调用reject失败函数。且执行器是立即执行的。

（3）若执行器的结果为正确，Promise会调用resolve函数。若执行器的结果为错误，Promise会调用reject函数。

如上述所说，Promise是处理异步编程的一种方式，那么异步编程是什么呢？

JavaScript的执行环境是“单线程”，也就是说JavaScript代码从上到下顺序解释（编译）执行。编译器编译代码的顺序是从上到下，如果遇到类似于定时器的一样的需要过一段时间后才能执行的代码，JavaScript会把它放到一边（消息队列），并继续执行其他代码。而消息队列的代码会在一段时间后执行。

比如这么一段代码：

console.log(123);
setTimeout(() => {
  console.log(456);
}, 2000);
console.log(789);

难道编译器打印出123之后，就停在第二行等两秒钟后打印完789才打印456么？

当然不是！

最后打印的结果如下：

2、故事介绍

相信各位已经对Promise更懵了（

那给大家讲这么一个小故事，用简单易懂的方式理解Promise叭！

有一天小倩下课放学，准备和小怡一起去蜜雪热城各买一杯柠檬水。两人去到蜜雪热城很快就下了单，店员分别给了她们两个小票，并告知她们需要等待五分钟才能把柠檬水做好。并在做好之后会亮灯通知她们，如果亮起绿灯说明做好了，如果亮起红灯说明由于原材料不足，柠檬水做不出来了

五分钟后，前台亮起了绿灯，并通知小倩前来拿柠檬水。前台亮起了红灯，通知小怡她的柠檬水做不成了。于是小倩高高兴兴地喝起了柠檬水，而小怡十分愤怒，把蜜雪热城当场扔出炸弹炸掉了

那么这个故事和Promise有什么关系呢？当然有关系！

在这个故事中，展现的就是Promise的运行机制：

①异步任务：店员需要五分钟才能够把柠檬水做好。而这就是需要过一段时间后才能执行的代码。

②小票：小票就是Promise实例。而小倩小怡下单就是通过Promise对象生成Promise实例。

③Promise三种状态：resolve成功状态就是柠檬水成功做好，成功后执行的resolve函数就是“小倩高高兴兴地喝起了柠檬水”；reject失败状态就是柠檬水由于原材料不足没有做成，失败后执行的reject函数就是“小怡十分愤怒，把蜜雪热城当场扔出炸弹炸掉了”；pending等待状态就是等待柠檬水制作过程，而“需要过五分钟才能把柠檬水做好”就是需要过一段时间后才能执行的代码（异步任务）

可以通过这么一段伪代码来解释：

function make() {
  // 创建Promise实例
  const promise = new Promise((resolve, reject) => {
    if(制作成功){
        setTimeout(() => {
          制作柠檬水
        }, 5分钟)
        resolve('高高兴兴地喝起了柠檬水')
    } else {
        reject('把蜜雪热城炸了')
    }
  });

  return promise
}

make(123).then((value) => {
  console.log(value)
}).catch((err) => {
  console.log(err)
})

3、案例解释

好了！相信各位都对Promise有一定了解了，那么最后做一个小案例来总结对Promise的认识：

案例：我要在两秒后执行getNumber函数，如果这个函数传入的参数值是0，那么执行resolve函数，打印'调用成功回调函数'。如果不是0，那么执行reject函数，打印'调用失败回调函数

function getNumber(number) {
  // 创建Promise实例
  const promise = new Promise((resolve, reject) => {
    if (number === 0) {
      setTimeout(() => {
        console.log(number);
      }, 1500)

      resolve('调用成功回调函数')
    } else {
      resolve('调用失败回调函数')
    }
  });

  return promise
}

getNumber(0).then((value) => {
  console.log(value);
}).catch((err) => {
  console.err(err);
})