关于异步处理,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方法指定的回调函数