Promise是异步编程的一种解决方案。
简单来说Promise就是一个用来存储数据的对象,它有着一套特殊的存取数据的方式。
可以解决异步回调函数/回调地狱问题。
创建Promise
1.创建Promise时需要一个 回调函数 作为参数
这个回调函数会在Promise时 自动调用
2.调用回调函数时,会传递 resolve 和 reject 两个参数
resolve 存放函数执行成功返回的数据
reject 存放函数执行失败返回的数据
const promise = new Promise((resolve, reject) => {
resolve('成功')
// reject('失败’)
// throw new Error('异常')
})
获取数据
可以通过实例方法 then 和 catch 来读取Promise中存储的数据
1.then 需要两个回调函数作为参数获取Promise存储的数据
通过 resolve 存储的数据,会调用 then 的第一个函数
通过 reject 存储的数据或者是 出现异常 时,会调用 then 的第二个函数
2.catch只需要一个回调函数作为参数,与then的第二个函数作用相同
捕获通过 reject 返回的数据或者是 出现异常
catch() 相当于 then(null, reason => {})
3.除了then和catch,Promise还提供了 finally 方法
finally无论是正常存储数据还是出现异常了都会执行
注意:finally中不会接收到数据
promise.then((result) => {
console.log(result, 'result');
}, (reason) => {
console.log(reason, 'reason');
})
promise.catch(err => {
console.log(err, 'err');
})
promise.finally(() => {
console.log("一定会执行")
})
因为在创建时调用了resolve,而finally里的回调函数无论如何都会执行,故输出为
隐藏属性
Promise中维护了2个隐藏属性
PromiseState ,用来记录Promise的3个状态;PromiseResult ,用来记录数据。
PromiseState3种状态
pending 等待
fullfilled 完成
rejected 拒绝
注意:PromiseState只能赋值一次,不能修改
console.log(promise);
状态改变流程
当Promise 创建时 ,PromiseState初始值为 pending
当通过 resolve 存储数据时 PromiseState 变为 fulfilled ,此时PromiseResult为resolve存储的数据
当通过 reject 存储数据或 异常 时 PromiseState 变为rejected,此时PromiseResult为reject存储的数据或为异常对象
链式调用
Promise中 then与catch返回值都是一个 新的Promise 对象,并且当前then或catch接收的参数是上一步then或catch的返回值
const p1 = promise.then(result => {
return "p1的return"
})
console.log(p1);
promise.then 是异步代码,没有通过reslove或者reject返回值 ,则 PromiseState处于pending状态 并且PromiseResult是undefined
既然返回的依然是Promise对象,则可以进一步 .then或者 .catch进行链式调用,从而解决回调地狱。
const p2 = promise.then(result => {
console.log("result", result);
return "p1的return"
}).then(result => {
console.log(result);
return "p2的return"
}).then(result => {
console.log(result);
})
Promise链式调用的时候要注意:
当Promise出现异常时,整个调用链中没有catch 则异常会向外抛出,
catch可以捕获前面出现的所有异常,但是不能捕获本身的异常,所以通常把catch写在最后
then和catch 读取上一步的执行结果,若上一步执行结果不是当前想要的则跳过,例:
// 第一个then并没有报错,故直接跳过catch,执行 第二个then
const p3 = promise.then(result => {
return "第一个then的return"
}).catch(result => {
console.log('catch',result);
}).then(result => {
console.log('第二个then',result);
return "第二个then的return"
})
静态方法
1.Promise.resolve()
创建一个立即完成的Promise
Promise.resolve(10).then(r => console.log(r))
// 相当于
new Promise(resolve => {
resolve(10)
}).then(result => {
console.log(result);
})
2.Promise.reject()
创建一个立即拒绝的Promise
Promise.reject(10).catch(r => console.log(r))
// 相当于
new Promise((resolve, reject) => {
reject(10)
}).catch(err => {
console.log(err);
})