Promise

一、为什么会出现Promise?

最常见的一个场景就是ajax请求,通俗来说,由于网速的不同,可能你得到返回值的时间也是不同的,这个时候我们就需要等待,结果出来了之后才知道怎么样继续下去。

在ajax的原生实现中,利用了onreadystatechange事件,当该事件触发并且符合一定条件时,才能拿到想要的数据,之后才能开始处理数据,这样做看上去并没有什么麻烦,但如果这个时候,我们还需要另外一个ajax请求,这个新ajax请求的其中一个参数,得从上一个ajax请求中获取,这个时候我们就不得不等待上一个接口请求完成之后,再请求后一个接口。

当出现第三个ajax(甚至更多)仍然依赖上一个请求时,我们的代码就变成了一场灾难。

这场灾难,往往也被称为回调地狱

因此我们需要一个叫做Promise的东西,来解决这个问题,当然,除了回调地狱之外,还有个非常重要的需求就是为了代码更加具有可读性和可维护性,我们需要将数据请求与数据处理明确的区分开来

二、Promise是什么?

Promise是异步编程的一种解决方案,比传统的解决方案回调函数更合理、更强大。

从语法上说,Promise是一个构造函数

从功能上说,Promise对象用来封装一个异步操作 并可以获取其成功/失败的结果值

Promise的初体验:

创建promise对象

const p = new Promise(executor);

其中:

executor函数: 执行器(resolve, reject) => {}

resolve函数: 内部定义成功时我们调用的函数 value => {}

reject函数: 内部定义失败时我们调用的函数 reason => {}

executor会在Promise内部立即同步调用,异步操作在执行器中执行

实例对象调用Promise原型中的then方法来完成对结果的处理

复制代码
 <script>
     const p = new Promise((resolve, reject) => {
         //如果明天不下雨,就出去玩,否则就不出去玩
         resolve();//将 Promise 对象标记为resolve
     })
     console.log(p)
     p.then(() => {
         console.log('出去玩')
     }, () => {
         console.log('不出去玩')
     })
 </script>

三、使用Promise的好处?

1. 指定回调函数的方式更加灵活

启动异步任务->返回promise对象->给promise对象绑定回调函数

2. 可以解决回调地狱问题,支持链式调用

四、Promise实例对象的两个属性

  • PromiseState(此属性为promise对象的状态属性)

    • fulfilled:成功的状态

    • rejected:失败的状态

    • pending:初始化的状态

    【注】状态只能由pending->fulfilled 或者是pending->rejected

  • PromiseResult

    此属性为promise对象的结果值(resolve以及reject函数的形参值

五、resolve函数以及reject函数

  • resolve:修改promise对象的状态,由pending修改到fulfilled;将实参设置到这个属性PromiseResult中。

  • reject:修改promise对象的状态,由pending修改到rejected;将实参设置到这个属性PromiseResult中。

六、Promise对象的状态

Promise对象通过自身的状态来控制异步操作,Promise实例具有三种状态.

  • 异步操作未完成:pending

  • 异步操作成功:fulfilled

  • 异步操作失败:rejected

这三种的状态的变化途径只有两种

  • 从pending(未完成)到fulfilled(成功)

  • 从pending(未成功)到rejected(失败)

一旦状态发生变化,就凝固了,不会再有新的状态变化,这也是Promise这个名字的由来,它的英语意思"承诺",

一旦承诺生效,就不得再改变了,这也意味着Promise实例的状态变化只可能发生一次。

在Promise对象的构造函数中,将一个函数作为第一个参数。而这个函数,就是用来处理Promise的状态变化。

上面的resolve和reject都为一个函数,他们的作用分别是将状态修改为resolved和rejected。

因此,Promise的最终结果只有两种。

复制代码
 异步操作成功,Promise实例传回一个值(value),状态变为fulfilled.
 异步操作失败,Promise实例抛出一个错误(error),状态变为rejected

七、Promise的then方法

then:指定用于得到成功value的成功回调和用于得到失败reason的失败回调,返回一个新的promise对象

  • 成功的状态:执行第一个回调函数

  • 失败的状态:执行第二个回调函数

promise.then()返回的新promise的结果状态由什么决定?

(1) 简单表达: 由then()指定的回调函数执行的结果决定

(2) 详细表达:

① 如果抛出异常, 新promise变为rejected, reason为抛出的异常

② 如果返回的是非promise的任意值, 新promise变为fulfilled, PromiseResult为返回的值

③ 如果返回的是另一个新promise, 此promise的结果就会成为新promise的结果

相关推荐
旧味清欢|8 分钟前
关注分离(Separation of Concerns)在前端开发中的实践演进:从 XMLHttpRequest 到 Fetch API
javascript·http·es6
热爱编程的小曾25 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin37 分钟前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox1 小时前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
-代号95271 小时前
【JavaScript】十四、轮播图
javascript·css·css3
树上有只程序猿1 小时前
后端思维之高并发处理方案
前端
庸俗今天不摸鱼2 小时前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
QTX187302 小时前
JavaScript 中的原型链与继承
开发语言·javascript·原型模式
黄毛火烧雪下2 小时前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox2 小时前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员