快速理解并使用Promise
自我记录
Promise 是一个构造函数, 通过 new 关键字实例化对象
Promise 是为了解决回调地狱而出现的;但本质上.then也在一直回调 所以更推荐使用async await
MDN文档: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise#描述
Promises/A+: https://promisesaplus.com/#point-1
一.Promise 基本使用
Promise 接受一个函数作为参数
在参数函数中接受两个参数
resolve: 成功函数
reject: 失败函数
new Promise((resolve, reject) => {
})
let p1 = new Promise((resolve, reject) => {
})
console.dir(p1)
promise 实例化对象有两个属性
state: 状态
result: 结果
1.1 promise 的状态(state) 3种
pending
: 可以理解为 准备, 待解决, 进行中.如上图所示 什么都不调用 pendingfulfilled
: 可以理解为 已完成, 成功.如下图所示 调用resolve()
状态变成 fulfilledrejected
: 可以理解为 已拒绝, 失败.如下图所示 调用reject()
状态变成 rejected
1.2 promise 的状态(state) 改变以及结果
通过调用
resolve()
和reject()
改变当前 promise 对象的状态
通过调用resolve(传参)
和reject(传参)
可以拿到result
结果
注意
promise状态只能改变一次
也就是说同时调用resolve() reject() 先调用哪个就会执行哪个 并结束
成功的状态以及传参数和结果
let p1 = new Promise((resolve, reject) => {
resolve()
})
let p2 = new Promise((resolve, reject) => {
resolve('success')
})
console.dir(p1);
console.dir(p2);
失败的状态以及传参数和结果
let p1 = new Promise((resolve, reject) => {
reject()
})
let p2 = new Promise((resolve, reject) => {
reject('err')
})
console.dir(p1);
console.dir(p2);
状态只能改遍一次
let p1 = new Promise((resolve, reject) => {
resolve('success') // 先调用成功的
reject('err')
})
let p2 = new Promise((resolve, reject) => {
reject('err') // 先调用错误的
resolve('success')
})
console.dir(p1);
console.dir(p2);
二.Promise 实例上的方法 三个
Promise 实例化方法中共有三个方法
then
catch
finally
2.1 then
then: 指定用于得到成功
value的成功回调
和用于得到失败reason的失败的回调
,并日将返回一个新的promise实例化对象
成功的状态:执行then方法的第一个回调函数
失败的状态:执行then方法的第二个回调函数
成功
let p1 = new Promise((resolve, reject) => {
resolve('success')
})
p1.then(
(value) => {
console.log('成功', value);
},
(reason) => {
console.log('失败', reason);
}
)
console.dir(p1);
失败
let p1 = new Promise((resolve, reject) => {
// resolve('success')
reject('err')
})
p1.then(
(value) => {
console.log('成功', value);
},
(reason) => {
console.log('失败', reason);
}
)
console.dir(p1);
2.2 catch
then方法中是传递了两个参数,也可以不传,
也可以只传成功的回调函数
如果只传递了成功的回调函数,那么就需要catch来执行失败的回调函数
当promise的状态改为rejected
时, 被执行
当promise执行体中出现代码错误
时, 被执行
同时写了then的第二个回调函数以及catch时
会执行then的第二个回调函数
let p1 = new Promise((resolve, reject) => {
// 以下都是出错的情况
reject('err')
// console.log(a)
// throw new Error('出错了')
})
p1.then((value) => {
console.log('成功', value);
})
.catch((reason) => {
console.log('失败', reason);
})
console.dir(p1);
同时写了then的第二个回调函数以及catch时
let p1 = new Promise((resolve, reject) => {
// 以下都是出错的情况
reject('err')
// console.log(a)
// throw new Error('出错了')
})
p1.then(
(value) => {
console.log('成功', value);
},
(reason) => {
console.log('失败then', reason);
}
).catch((reason) => {
console.log('失败catch', reason);
})
console.dir(p1);
2.3 finally
finally是ES9(ES2018)中新增的特性
表示无论Promise对象变成了fulfilled
还是rejected
状态,最终都会执行
finally 方法回调函数参数是不接受参数的!
let p1 = new Promise((resolve, reject) => {
resolve('success')
})
p1.then(
(value) => {
console.log('成功', value);
},
(reason) => {
console.log('失败then', reason);
}
).catch((reason) => {
console.log('失败catch', reason);
}).finally(() => {
console.log('最终我都被执行了');
})
console.dir(p1);
let p2 = new Promise((resolve, reject) => {
reject('err2')
})
p2.then(
(value) => {
console.log('成功2', value);
},
(reason) => {
console.log('失败then2', reason);
}
).catch((reason) => {
console.log('失败catch2', reason);
}).finally(() => {
console.log('最终我都被执行了2');
})
console.dir(p2);
还有一些静态方法这里就不多体现,掌握如上内容个人认为可以进行Promise的基本使用