JavaScript--ES6【Promise】对象详解

codeMak1r.小新

已于 2022-07-09 22:41:30 修改

阅读量2k

点赞数 55

分类专栏：【前端基础】--克莱因 # 【Promise】--无量 JavaScript 文章标签： javascript 前端 es6

于 2022-06-08 12:01:55 首次发布

本文链接：https://blog.csdn.net/Svik_zy/article/details/125174238

版权

【前端基础】--克莱因同时被 3 个专栏收录

11 篇文章 2 订阅

订阅专栏

JavaScript

9 篇文章 1 订阅

订阅专栏

【Promise】--无量

4 篇文章 2 订阅

订阅专栏

前言

📔博主是一名大学在读本科生，主要学习方向是前端😊。
🍭目前已经更新了【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>
  <div class="container">
    <h2 class="page-header">Promise 初体验</h2>
    <button class="btn-primary" id="btn">点击抽奖</button>
  </div>

<script>
   // 生成随机数
   function rand(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>
  <div class="container">
    <h2 class="page-header">Promise 初体验</h2>
    <button class="btn-primary" id="btn">点击抽奖</button>
  </div>

  <script>
    // 生成随机数
    function rand(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 = new Promise((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方法

then方法的返回值也是一个Promise对象。

p.then((value) => {
  alert('恭喜恭喜，奖品为 10万 RMB 劳斯莱斯优惠券,您的中奖数字为：' + value)
}, (reason) => {
  alert('再接再厉，您的号码为：' + reason)
})

对于已经实例化过的 promise 对象可以调用 promise.then() 方法，传递 resolve 和 reject 方法作为回调。
then方法接收的第一个回调是异步事件成功的回调（resolve）
第二个回调是异步事件失败的回调（reject）
promise.then() 是 promise 最为常用的方法。

then方法串联多个任务

当需要串联多个任务时，可以使用then方法。

let p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('OK')
  }, 1000)
})

p.then(value => {
  return new Promise((resolve, reject) => {
    resolve('success')
  })
}).then(value => {
  console.log(value)
}).then(value => {
  console.log(value)
})

解释：

p是一个Promise对象，返回状态为成功（ok）。
第一个p.then方法，接收p这个Promise对象成功的回调。
这个回调的内部的返回值又是一个Promise对象，对象状态也为成功。
于是可以用then接收这个成功的状态（success）。

第二个then方法返回的是一个Promise对象，接收到了上一个返回的Promise对象的状态（success）成功。
打印出的value为success。
回调内部没有声明返回值，默认返回值为undefined。
Undefined不是一个Promise类型的对象，
于是第二个then方法内部的这个Promise对象返回的状态为成功，值为undefined。

第三个then方法返回的是一个Promise对象，接收到了上一个Promise对象的返回值（Undefined）。
于是打印出的value为：undefined。

对于Promise对象返回状态以及返回值的讲解，我放在了下一篇文章(【Promise】详解Promise_API)中，详情点击即可。

2、catch方法

对于上面的then()，也可以使用catch()进行简化。

// 调用catch方法
p.then((value) => {
    alert('恭喜恭喜，奖品为 10万 RMB 劳斯莱斯优惠券,您的中奖数字为：' + value)
}).catch((reason) => {
 	alert('再接再厉,您的号码为：' + reason)
})

总结：
promise.then()方法接收两个参数，第一个为成功的回调，第二个为失败的回调；
promise.then().catch()方法，then方法接收成功的回调，catch方法捕捉失败的回调。

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

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

👉关注✨点赞👍收藏📂

回见～

在这里插入图片描述

codeMak1r.小新

关注

55
点赞
踩
53

收藏

觉得还不错? 一键收藏
打赏
85
评论
JavaScript--ES6【Promise】对象详解

同步任务：在主线程队列中，只有前一个任务完成后才会执行下一个任务异步任务：不进入主线程队列,而是进入异步队列,前一个任务完成与否不影响后一个任务的执行(不阻塞后续任务执行的任务)同步任务的顺序是：按顺序执行，先执行定时器，后打印出，但是代码中呈现的是，顺序是：先打印出111，定时器时间到，再执行定时器内的回调。下面都是一些常见的异步操作：fs 文件操作数据库操作AJAX定时器3、🍋 Promise 的状态改变Promise 对象有以下两个特点:对象的状态不受外界影响。Promise .
复制链接

扫一扫