本文已参与「新人创作礼」活动,一起开启掘金创作之路。
一. Promise由来
es6之前,我们处理异步函数非常麻烦,需要自己定义回调函数让使用者传入,才可以进行正常的回调;但是这样做没有一个固定的格式,那么不同开发者开发的方法,需要传入的回调函数顺序,格式也各不相同,对于需要使用其他框架的开发者来说非常痛苦,学习成本很高;而且ajax很容易出现回调地狱,es6推出了Promise类,就是为了解决这一现象的。
二. Promise解决异步
Promise是es6新推出的一个类,顾名思义就是许诺,承诺;意思是给开发者一个承诺,代码执行成功或者失败,都会执行规定好的回调函数。
写法:promise类中需要传入一个函数,函数内部也有两个参数,分别是resolve和reject,对应成功和失败的回调。
function fun(num) {
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
if (num > 0) {
resolve(`${num},大于0`)
} else {
reject(`${num},小于0`)
}
})
})
}
fun(10).then(res => console.log(res))
fun(-1).catch(err => console.log(err))
三. Promise状态区分
pending:执行时状态
fulfilled:已完成,执行resolve
rejected:操作失败,执行reject
四. resolve传入不同值的区别
传入正常数值或者对象,会作为.then回调函数的参数
传入promise对象,那么会看这个对象执行的结果
传入对象带then方法,那么会执行该方法,根据结果决定状态
五. 多次调用then、catch
then、catch返回值也是promise,所以可以多次调用
const promise = new Promise((resolve, reject) => {
resolve('aaa')
})
promise.then(res=>{
console.log(res) // aaa
return 'bbb'
}).then(res => {
console.log(res) // bbb
})
promise.then(res => {
console.log(res) // aaa
})
六. finally
不管Promise是什么状态,都会执行finally!
七. all、allSettled方法
Promise类提供了一个all方法,可以把多个promise实例放到一起,形成新的Promise,新Promise的状态由内部所有Promise决定,当内部都是fulfilled状态,它才是fulfilled,把所有Promise返回值放到一个数组里返回;有一个rejected,那就是rejected
const p1 = new Promise()
const p2 = new Promise()
const p3 = new Promise()
Promise.all([p1,p2,p3]).then(res=> {
console.log("all promise res:", res)
})
allSettled方法就是返回每个promise的结果,无论状态如何
Promise.allSettled([p1, p2, p3]).then(res => { console.log("all settled:", res) })