ES6 Generator和Promise

目录

Generator

如何创建Generator函数 ?

模拟发起异步请求

Promise

实例化

实例方法

工厂函数

静态方法

Promise.all([p1,p2,....])  

Promise.race([p1,p2,....])

Promise.any([p1,p2,....])

Promise.allSettled([p1,p2,....])

---

Generator

Generator是ES6提供的一种异步编程解决方案，语法不同于普通函数；简单的把Generator 理解为一个状态机，封装了多个内部状态。执行Generator 函数会返回一个迭代器对象，可以通过调用迭代器next依次遍历Generator函数内部的每一个状态。

如何创建Generator函数 ?

每个状态之间都是独立的

因为return会阻止后面的代码运行，所以 Generator提供了yield，yiled也是返回值，但是执行一次状态停在了第一个yield ，依次执行next方法，执行下一个yield状态。代码分段执行，一个yield分一段。上一个yield结束是下个状态的开始,下一个状态的结束再执行下一个yield。yield后面的是返回值。最后一个yield可以return返回。

模拟发起异步请求

拿到第一个状态的返回结果再执行第二个状态，状态之间数据传递通过next

如果想要实现数据传递 需要发起第二段程序执行   拿上一个状态得返回值作为下一个状态得入口

 

Promise

Promise是一种异步编程解决方案，Promise是一个容器，保存着将来才会执行的代码；从语法角度来说Promise是一个对象，可以用来获取异步操作的消息。异步操作，同步解决，避免了层层嵌套的回调函数，可以链式调用降低了操作难度。

实例化

Promise构造函数接收一个函数作为参数，也就是回调函数；

该函数的两个参数分别是resolve和reject。resolve作为成功的回调函数，reject作为失败的回调函数。

Promise对象代表一个异步操作有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。最后返回resolved(已定型)结果。

实例方法

定义在Promise.prototype中的方法，通过Promise实例可以直接调用
then(res=>{}) 状态由pending变为fulfilled的时候也就是异步操作成功之后执行该回调函数
参数：回调函数，回调函数的参数为resolve函数传递过来的值
返回值：返回一个新的Promise实例对象，因此可以使用链式调用
catch(err=>{}) 由pending变为rejected的时候执行该回调函数也就是异步失败之后执行该回调函数
参数：回调函数，回调函数的参数为reject函数传递过来的值
返回值：返回一个新的Promise实例对象，因此可以使用链式调用
finally()无论异步操作执行成功失败与否，都会执行该回调
参数：回调函数
返回值：返回一个新的Promise实例对象

 

考虑到需要创建多个promise实例对象 这些对象封装ajax请求

使用工厂函数创建promise实例对象

工厂函数

在下面静态方法的代码中

静态方法

Promise.all([p1,p2,....])  

参数:数组 [多个promise实例] 返回值:promise实例 实例状态

每一个请求实例为fullfilled,才是fullfilled。否则是rejected

Promise.race([p1,p2,....])

参数:数组 [多个promise实例] 返回值:返回先请求成功的实例 返回的也是promise实例对象

Promise.any([p1,p2,....])

参数:数组 [多个promise实例] 返回值:返回任意一个成功的实例

Promise.allSettled([p1,p2,....])

参数:数组 [多个promise实例] 返回值:promise实例

每一个请求实例为rejected,才是rejected。否则是fullfilled