学习尚硅谷-------Promise笔记

关于异步处理，ES5的回调使我们陷入地狱，ES6的Promise使我们脱离魔障，终于、ES7的async await带我们走向光明。

es5中的回调函数指的是一个函数作为参数传递到另一个函数中，这个作为参数的函数就是回调函数。

Promises对象是CommonJS工作组提出的一种规范，目的是为异步编程提供统一接口。

简单说，它的思想是，每一个异步任务返回一个Promise对象，该对象有一个then方法，允许指定回调函数。比如，f1的回调函数f2,可以写成：

f1().then(f2);

异步编程

fs 文件操作

require ('fs').readFile('./index.html', (err,data) => {
   })

Ajax

$.get('/server', (data) => {
   })

定时器

setTimeout(() => {
   }, 2000)

以上内容使用的是纯回调函数来进行异步操作

Promise是es6引入异步编程的新的解决方案

语法上：一个构造函数。可以实例化对象，封装异步操作，获取成功和失败的结果

为什么要使用Promise？

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

​ 旧的：必须在启动异步任务前指定

​ promise：启动异步任务 =》返回promise对象 =》给promise对象绑定回调函数（甚至可以在异步任务结束后指定/多个）

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

asyncFunc1(opt, (...args1) => {
   
	asyncFunc2(opt, (...args2) => {
   
		asyncFunc3(opt, (...args3) => {
   
			asyncFunc4(opt, (...args4) => {
   
				//some operation
			})
		})
	})
})

回调地狱：回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调执行的条件

回调地狱的缺点：不便于阅读，不便于异常处理

案例需求1：点击抽奖按钮，等2秒钟，告知是否中奖，中奖概率定位30%，中奖显示弹框，“恭喜您中奖了”，未中奖，弹出框“再接再厉”

案例需求2：promise实现Ajax请求

案例需求3：promise封装Ajax请求

promise 状态

实例对象中的一个属性 【PromiseState】属性是内置的，我们不能直接对其进行操作

*pending 未决定的

*resolved / fulfilled 成功

*rejected 失败

promise的状态改变

1.pending ===> resolved

2.pending ===>rejected

说明：只有这2种，且一个Promise对象只能改变一次

​ 无论变为成功还是失败，都会有一个结果数据

​ 成功的结果数据一般称为value，失败的结果数据一般称为reason

promise 对象的值

示例对象中的另一个属性 【PromiseResult】

保存着异步任务 [成功 / 失败] 的结果

resolve 和 reject 函数可以对此属性进行修改

promise 的基本流程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RaAbrfsr-1607945193404)(C:\Users\sundan\AppData\Roaming\Typora\typora-user-images\image-20201205190541879.png)]

如何使用promise

1.Promise的构造函数：Promise（executor）{}

​ （1）executor函数：执行器 (resolve, reject) => {} //可以使用箭头函数或匿名函数

​ （2）resolve函数：内部定义成功时我们调用的函数 value => {}

​ （3）reject函数：内部定义失败时我们调用的函数 reason => {}

说明：执行器函数会在promise内部立即同步调用，异步操作在执行器中执行

let p = new Promise((resovle, reject) => {
   
    console.log(11111)
})
console.log(22222)

2.Promise.prototype.then方法：(onResolved, onRejected) => {} //用来指定回调

（1）onResolved函数：成功的回调函数 (value) => {}

（2）onRejected函数： 失败的回调函数 (reason) => {}

说明：指定用于得到的成功value的成功回调和用于得到失败reason的失败回调

​ 返回一个新的Promise对象

3.Promise.prototype.catch方法：(onRejected) => {}

（1）onRejected函数：失败的回调函数 (reason) => {}

let p = new Promise((resovle, reject) => {
   
    //修改 promise的状态
    reject('error')
})
p.catch(reason => {
   
    console.log(reason)
})

4.Promise.prototype.finally方法：() => {}

finally()方法的回调函数不接受任何参数，不管promise最后的状态，在执行完then或catch指定的回调函数后，都会执行finally方法指定的回调函数