JavaScript--ES6【Promise】对象详解

文章目录

在这里插入图片描述

前言

📔博主是一名大学在读本科生，主要学习方向是前端😊。
🍭目前已经更新了【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，定时器时间到，再执行定时器内的回调。

下面都是一些常见的异步操作：

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方法捕捉失败的回调。

好啦～今天的案例分享就到这里了，如果有疑问或者文章出现错误的话请一定要联系我哟😎😎～

非常感谢你的阅读，你的支持将会是我最大的动力

👉关注✨点赞👍收藏📂

回见～

在这里插入图片描述

标签： javascript 前端 es6

本文转载自: https://blog.csdn.net/Svik_zy/article/details/125174238
版权归原作者 codeMak1r. 所有，如有侵权，请联系我们删除。

JavaScript--ES6【Promise】对象详解

文章目录

前言

1、🍎 Promise是什么？

2、🍓 异步编程

3、🍋 Promise 的状态改变

4、🍉 Promise 优缺点

5、🍒 Promise的基本流程

6、🍑 Promise示例

不使用Promise的写法

Promise写法

Promise的.then方法和.catch方法

发表评论

“JavaScript--ES6【Promise】对象详解”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航