文章目录
前言
📔博主是一名大学在读本科生，主要学习方向是前端😊。
🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏🤩
🛠目前正在学习的是React框架，中间夹杂了一些基础知识的回顾⌨️
🍇希望可以和大家一起学习，一起进步，码出未来💪！！
🌈博客主页👉codeMak1r.的博客
👉关注✨点赞👍收藏📂
1、🍎 Promise是什么？
ECMAscript 6 原生提供了 Promise 对象。
Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。
- 抽象表达： - Promise是一门新的技术（ES6规范）- Promise是JS 中进行异步编程的新解决方法- 备注： 旧方案是单纯使用回调函数
- 具体表达： - 从语法上来说：Promise是一个构造函数- 从功能上来说：Promise 对象用来封装一个异步操作并可以获取其成功/失败的结果值。
2、🍓 异步编程
同步任务：在主线程队列中，只有前一个任务完成后才会执行下一个任务
异步任务：不进入主线程队列,而是进入异步队列,前一个任务完成与否不影响后一个任务的执行(不阻塞后续任务执行的任务)
setTimeout(function(){
console.log('执行了回调函数')},3000)
console.log(111)// 111// 执行了回调函数
同步任务的顺序是：按顺序执行，先执行定时器，后打印出
111
，但是代码中呈现的是
异步操作
，顺序是：先打印出111，定时器时间到，再执行定时器内的回调。
下面都是一些常见的异步操作：
- fs 文件操作
require('fs').readFile('./index.html',(err,data)=>{}) - 数据库操作
- AJAX
$.get('/server',(data)=>{}) - 定时器
setTimeout(()=>{},2000);
3、🍋 Promise 的状态改变
Promise 对象有以下两个特点:
- 对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态：
pending: 初始状态，不是成功或失败状态。 resolved: 意味着操作成功完成。 rejected: 意味着操作失败。
只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来，它的英语意思就是「承诺」，表示其他手段无法改变。
- 一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise 对象的状态改变，只有两种可能：
从 Pending 变为 Resolved 从 Pending 变为 Rejected。
说明:
只有这 2 种, 且一个 promise 对象只能改变一次
无论变为成功还是失败, 都会有一个结果数据
**成功的结果数据一般称为value, 失败的结果数据一般称为
reason**
只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对 Promise 对象添加回调函数，也会立即得到这个结果✅。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。
4、🍉 Promise 优缺点
优点：
有了 Promise 对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise 对象提供统一的接口，使得控制异步操作更加容易。
缺点：
Promise 也有一些缺点。首先，无法取消 Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise 内部抛出的错误，不会反应到外部。第三，当处于 Pending 状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。
5、🍒 Promise的基本流程
6、🍑 Promise示例
需求：
点击按钮， 1s 后显示是否中奖（30%）中奖
若中奖弹出 恭喜恭喜，奖品为 10万 RMB 劳斯莱斯优惠券
若未中奖弹出 再接再厉
不使用Promise的写法
<body><divclass="container"><h2class="page-header">Promise 初体验</h2><buttonclass="btn-primary"id="btn">点击抽奖</button></div><script>// 生成随机数functionrand(m, n){return Math.ceil(Math.random()*(n - m +1))+ m -1}// 获取元素对象const btn = document.querySelector('#btn')// 绑定单击事件
btn.addEventListener('click',function(){// 定时器setTimeout(()=>{let n =rand(1,100)if(n <30){alert('恭喜恭喜，奖品为 10万 RMB 劳斯莱斯优惠券')}else{alert('再接再厉')}},1000)</script></body>
Promise写法
<body><divclass="container"><h2class="page-header">Promise 初体验</h2><buttonclass="btn-primary"id="btn">点击抽奖</button></div><script>// 生成随机数functionrand(m, n){return Math.ceil(Math.random()*(n - m +1))+ m -1}// 获取元素对象const btn = document.querySelector('#btn')// 绑定单击事件
btn.addEventListener('click',function(){// promise形式实现// resolve 解决 => 异步任务成功的时候// reject 拒绝 => 异步任务失败的时候const p =newPromise((resolve, reject)=>{// // 定时器setTimeout(()=>{let n =rand(1,100)if(n <30){resolve(n)// 将promise对象的状态设置为成功}else{reject(n)// 将promise对象的状态设置为失败}},1000)})// 调用then方法
p.then((value)=>{alert('恭喜恭喜，奖品为 10万 RMB 劳斯莱斯优惠券,您的中奖数字为：'+ value)},(reason)=>{alert('再接再厉,您的号码为：'+ reason)})})</script></body>
Promise的.then方法和.catch方法
1、then方法
p.then((value)=>{alert('恭喜恭喜，奖品为 10万 RMB 劳斯莱斯优惠券,您的中奖数字为：'+ value)},(reason)=>{alert('再接再厉，您的号码为：'+ reason)})
对于已经实例化过的 promise 对象可以调用 promise.then() 方法，传递 resolve 和 reject 方法作为回调。
then方法接收的第一个回调是异步事件成功的回调（resolve）
第二个回调是异步事件失败的回调（reject）
promise.then() 是 promise 最为常用的方法。
2、catch方法
对于上面的then()，也可以使用catch()进行简化。
// 调用catch方法
p.then((value)=>{alert('恭喜恭喜，奖品为 10万 RMB 劳斯莱斯优惠券,您的中奖数字为：'+ value)}).catch((reason)=>{alert('再接再厉,您的号码为：'+ reason)})
总结：
promise.then()方法接收两个参数，第一个为成功的回调，第二个为失败的回调；
promise.then().catch()方法，then方法接收成功的回调，catch方法捕捉失败的回调。
好啦～今天的案例分享就到这里了，如果有疑问或者文章出现错误的话请一定要联系我哟😎😎～
非常感谢你的阅读，你的支持将会是我最大的动力
👉关注✨点赞👍收藏📂
回见～
版权归原作者 codeMak1r. 所有， 如有侵权，请联系我们删除。