09：Promise

三思原创大约 8 分钟

本文介绍了Promise的定义和使用，通过网络请求回调地狱和定时器异步事件的例子说明了Promise的优雅解决方案。通过链式编程示例展示了Promise处理异步事件的方法及与嵌套使用定时器的区别。

Vue自学笔记9：Promise

本文章为观看B站codewhy老师教学视频自学vuejs过程中记录的笔记，对视频进行了清晰的整理。

(帮大家节省自己整理笔记的时间啦,剩下的时间一定要去上机实操,多多练习!!)

八、Promise

1.Promise的定义

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

但是初次接触Promise会一脸懵逼，这TM是什么东西？
看看官方或者一些文章对它的介绍和用法，也是一头雾水。 Promise到底是做什么的呢？
Promise是异步编程的一种解决方案。那什么时候我们会来处理异步事件呢？
一种很常见的场景应该就是网络请求了。
我们封装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单的3+4=7一样将结果返回。
所以往往我们会传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调出去。
如果只是一个简单的网络请求，那么这种方案不会给我们带来很大的麻烦。
但是，当网络请求非常复杂时，就会出现回调地狱。 OK，我以一个非常夸张的案例来说明。

2.网络请求的回调地狱

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

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

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

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

如何做呢？就是使用Promise。 Promise可以以一种非常优雅的方式来解决这个问题。

3. 定时器异步事件

  <script>
         // 新建Promise对象,需要传入一个函数作为参数
         // 这个函数,又需要resolve和reject两个函数作为参数
         //实现功能:第一秒输出111,第二秒输出222,第三秒输出333
 
         //普通写法(产生回调地狱)
         // setTimeout(() => {
         //     console.log('111');
         //     setTimeout(() => {
         //         console.log('222');
         //         setTimeout(() => {
         //             console.log('333');
         //         }, 1000);
         //     }, 1000);
         // }, 1000);
 
 
         //使用promise(链式编程)
         new Promise((resolve, reject) => {
             // 所有的异步操作都可以封装在promise对象中
             //第一次网络请求的代码(用settimeout模拟网络请求)
             setTimeout(() => {
                 resolve()
             }, 1000)
         }).then(() => {     //then函数里面的箭头函数就是resolve(),上方调用的resolve函数就是它
             // 第一次拿到结果的处理代码
             console.log('111');
             return new Promise((resolve, reject) => {
                 //第二次网络请求的代码
                 setTimeout(() => {
                     resolve()
                 }, 1000);
             })
         }).then(() => {
             // 第二次拿到结果的处理代码
             console.log('222');
             return new Promise((resolve, reject) => {
                 //第三次网络请求的代码
                 setTimeout(() => {
                     resolve()
                 }, 1000);
             })
         }).then(() => {
             // 第三次拿到结果的处理代码
             console.log('333');
         })
 </script>

嵌套、平行使用定时器的区别

  //嵌套使用定时器
  setTimeout(() => {
   var date1 = new Date();
   console.log("111",date1);
   setTimeout(() => {
       var date2 = new Date();
       console.log("222",date2);
       setTimeout(() => {
           var date3 = new Date();
           console.log("333",date3);
       }, 3000);
   }, 2000);
  }, 1000); //这就造成了回调地狱现象（套娃），可以使用generator解决（见下面代码）
  
  //平行使用定时器    
  setTimeout(() => {
   var date4 = new Date();
   console.log("444",date4);
  }, 1000);
  setTimeout(() => {
   var date5 = Date();
   console.log("555",date5);
  }, 2000);
  setTimeout(() => {
   var date6 = Date();
   console.log("666",date6);
  }, 3000);

结果：

结果总结：

传统方式：

promise:

我们先来认认真真的读一读这个程序到底做了什么？

new Promise很明显是创建一个Promise对象
小括号中((resolve, reject) => {})也很明显就是一个函数，而且我们这里用的是之前刚刚学习过的箭头函数。
我们先知道一个事实：在创建Promise时，传入的这个箭头函数是固定的（一般我们都会这样写）
resolve和reject它们两个也是函数，通常情况下，我们会根据请求数据的成功和失败* 来决定调用哪一个*。
如果是成功的，那么通常我们会调用resolve(messsage)，这个时候，我们后续的then会被回调。
如果是失败的，那么通常我们会调用reject(error)，这个时候，我们后续的catch会被回调。 OK，这就是Promise最基本的使用了。

4.Promise三种状态

sync:同步
async:异步

首先, 当我们开发中有异步操作时, 就可以给异步操作包装一个Promise,异步操作之后会有三种状态

pending：等待状态，比如正在进行网络请求，或者定时器没有到时间。
fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调 .then()
reject：拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调 .catch()

promise另一种写法:

5.Promise链式调用

我们在看Promise的流程图时，发现无论是then还是catch都可以返回一个Promise对象。所以，我们的代码其实是可以进行链式调用的：这里我们直接通过Promise包装了一下新的数据，将Promise对象返回了

Promise.resovle()：将数据包装成Promise对象，并且在内部回调resolve()函数
Promise.reject()：将数据包装成Promise对象，并且在内部回调reject()函数

简化版代码：

如果我们希望数据直接包装成Promise.resolve，那么在then中可以直接返回数据
注意下面的代码中，我讲return Promise.resovle(data)改成了return data 结果依然是一样的

 //实现效果:
 //网络请求:aaa->第一层网络处理
 //处理:aaa111->第二层网络处理
 //处理:aaa111222->第三层网络处理
 new Promise((resolve, reject) => {
             setTimeout(() => { resolve('aaa') }, 1000)
         }).then(res => {
             console.log(res, '第一层网络处理');
             return new Promise((resolve) => { resolve(res + '111') }) //如果无需reject状态,可以不填写reject参数
         }).then(res => {
             console.log(res, '第二层网络处理');
             return new Promise((resolve) => { resolve(res + '222') })
         }).then(res => {
             console.log(res, '第三层网络处理');
         })
         //可以看出:第一层和第二层网络处理时new的Promise内部并没有进行异步处理
         // 因此这里可以进行简化,如下:
 
         new Promise((resolve, reject) => {
             setTimeout(() => { resolve('aaa') }, 1000)
         }).then(res => {
             console.log(res, '第一层网络处理');
             return new Promise.resolve(res + '111')//无需异步处理时的简化
         }
         ).then(res => {
             console.log(res, '第二层网络处理');
             return new Promise.resolve(res + '222')//无需异步处理时的简化
         }).then(res => {
             console.log(res, '第三层网络处理');
         })
         //还可以进行简化,如下:
 
         new Promise((resolve, reject) => {
             setTimeout(() => { resolve('aaa') }, 1000)
         }).then(res => {
             console.log(res, '第一层网络处理');
             return res + '111' //默认会进行Promise对象的包装
         }
         ).then(res => {
             console.log(res, '第二层网络处理');
             return res + '222'//默认会进行Promise对象的包装
         }).then(res => {
             console.log(res, '第三层网络处理');
         })

6.Promise的all方法

all方法中的参数为一个数组,数组中存放不同的Promise对象,当数组中的所有Promise都运行完成了,就可以调用.then方法,而.then方法中的results也是一个数组,对应all方法数组的Promise对象.

发布于 2022-10-23 17:35