什么是Promise呢?

ES6中一个非常重要和好用的特性就是Promise

Promise是异步编程的一种解决方案。

那什么时候我们会来处理异步事件呢?

  • 一种很常见的场景应该就是网络请求了。

  • 我们封装一个网络请求的函数,因为不能立即拿到结果,所以不能像简单的3+4=7一样将结果返回。

  • 所以往往我们会传入另外一个函数,在数据请求成功时,将数据通过传入的函数回调出去。

  • 如果只是一个简单的网络请求,那么这种方案不会给我们带来很大的麻烦。

但是,当网络请求非常复杂时,就会出现回调地狱。

OK,我以一个非常夸张的案例来说明。

我们来考虑下面的场景(有夸张的成分):

  • 我们需要通过一个url1从服务器加载一个数据data1,data1中包含了下一个请求的url2
  • 我们需要通过data1取出url2,从服务器加载数据data2,data2中包含了下一个请求的url3
  • 我们需要通过data2取出url3,从服务器加载数据data3,data3中包含了下一个请求的url4
  • 发送网络请求url4,获取最终的数据data4

image-20200702151542085

上面的代码有什么问题吗?

  • 正常情况下,不会有什么问题,可以正常运行并且获取我们想要的结果。
  • 但是,这样额代码难看而且不容易维护。
  • 我们更加期望的是一种更加优雅的方式来进行这种异步操作。

如何做呢?就是使用Promise。

  • Promise可以以一种非常优雅的方式来解决这个问题。

Promise的基本使用

code-snapshot (54)

new Promise很明显是创建一个Promise对象

小括号中((resolve, reject) => {})也很明显就是一个函数,而且我们这里用的是之前刚刚学习过的箭头函数。

但是resolve, reject它们是什么呢?

我们先知道一个事实:在创建Promise时,传入的这个箭头函数是固定的(一般我们都会这样写)

resolve和reject它们两个也是函数,通常情况下,我们会根据请求数据的成功和失败来决定调用哪一个。

成功还是失败?

  • 如果是成功的,那么通常我们会调用resolve(messsage),这个时候,我们后续的then会被回调。
  • 如果是失败的,那么通常我们会调用reject(error),这个时候,我们后续的catch会被回调。

也就说上面的代码的意思就是,一秒之后发送数据成功的话,then会被回调data参数接收的时resolve发送的数据,将其打印5次。若数据发送失败reject发送的数据,被catch回调接收将其打印。

查看效果

image-20200702152808071

Promise三种状态

image-20200702153129356

ppending:等待状态,比如正在进行网络请求,或者定时器没有到时间。

fulfill:满足状态,当我们主动回调了resolve时,就处于该状态,并且会回调.then()

reject:拒绝状态,当我们主动回调了reject时,就处于该状态,并且会回调.catch()

同时catch函数也可以省略,.then()函数的第二个参数代表的就是发送数据失败,被调用的函数。所以Promise的基本使用也可以变成如下这样

code-snapshot (55)

Promise的链式调用

code-snapshot (56)

image-20200702154205868

在then函数里面又返回一个新的Promise函数。在外通过.then函数获取其传递成功的值。

code-snapshot (57)

第一个Promise成功发送aaa字符,被then函数用res参数名接收。将其打印aaa 第一层的10行处理代码。后再then函数中返回一个新的Promise.resolve(){new Promise(resolve => resolve(结果))的简写},发送一个新的数据aaa111。再用then函数接收,打印aaa111 第二场的10行处理代码再返回一个新的Promise.resolve(),发送一个新的数据aaa111222。再用then函数接收,打印aaa111222 第三层的10行处理代码

Promise.reject()也可以使用

image-20200702155059679

简化Promise.resolve()

code-snapshot (58)

其运行流程一样,直接return,其内部会自动使用Promise对其进行包装并使用resolve的发送数据

image-20200702155059679

简化Promise.reject() 抛出异常

code-snapshot (59)

并不是每次数据发送都是成功的,若数据发送失败我们可以使用throw数据抛出异常数据,被catch函数接收。

image-20200702160044253

image-20200702160100483

Promise的all方法使用

有时候我们需要接收多个请求数据才能进行正确的操作。此时就需要使用到all方法。

code-snapshot (60)

通过Promise.all传入一个数组对象,里面写了两个Promise函数。通过then函数接收到他们成功发送的数据(是一个数组)

image-20200702160632865