1、promise
的三种状态
pendding
、fulfilled
、rejected
let p = new Promise(() => {
})
console.log(p) // PromiseState:pendding,PromiseResult:undefined
// promise会接收2个回调,一个是成功的回调 resove,一个是失败的reject
let p1 = new Promise((resove,reject) => {
resolve('sucess')
})
console.log(p1) // PromiseState:fulfilled,PromiseResult:success
let p2 = new Promise((resove,reject) => {
reject('err')
})
console.log(p1) // PromiseState:rejected,PromiseResult:err
2、promise
的原型方法,then()
,catch()
,finally()
then()
方法
promise
会默认有一个then
和catch
方法,then()
方法会接收2个参数res,err
, 需要注意的是,then()方法会接收到resolve
或者reject
其中一个的值,优先原则,谁先执行,接收谁,也说明了,在这个地方,他们的执行顺序是同步的
let p = new Promise((resolve,reject) => {
resolve('success')
// reject('err')
})
p.then(res=> {
console.log(res); // success
},err => {
console.log(err) // err
})
那我们都知道
promise
的另一个大的特性就是可以通过.then()
方法实现无限链式操作,原理就是在then()
方法内部,他最终都会return出一个promise
对象。
let p1 = p.then(res => {
return 'test'
})
console.log(p1) // 这里会打印出来一个promise对象
catch()
方法
promise
的catch()
方法会收集promise
的失败回调reject
,需要注意的是,promise
的reject
既能被then
的err
接收,也能被catch
接收,但是如果then
的err
和catch
同时存在的话,会优先进入到then
的err
中
let p = new Promise((resove,reject) => {
reject('err')
})
p.then(res => {
console.log(res) // 因为是reject的执行结果,所以这里不会打印
},err => {
console.log(err,'test') // 这里会打印
}).catch(err => {
console.log(err) // 这里不会打印
})
finally()
方法
不管是
then()
还是catch()
,最终都会进入finally()
方法,他代表的是这个promise
执行完了
p.then(res => {
console.log(res) // 因为是reject的执行结果,所以这里不会打印
},err => {
console.log(err,'test') // 这里会打印
}).catch(err => {
console.log(err) // 这里不会打印
}).finally((res) => {
console.log(res) // undefined
console.log('执行完毕')
}).finally(() => {
console.log('test') // 这里会继续执行,打印出test
})
这里需要注意的是,
finally
是接收不到上面then
或者catch
的返回值的,它仅仅代表的是,这个promise
执行完了。
同样的,finally
最终也会返回一个promise
对象,后面如果跟了then
,catch
,finally
同样会继续执行,只不过同样接收不到前面return
出来的值
3、promise
的静态方法,resolve
,reject
,all
,allSettled
,race
resolve
和reject
会返回对应状态的promise
对象
let resolve = Promise.resolve('success')
console.log(resolve) // 一个成功状态(fulfilled)的promise对象
let reject = Promise.reject('err')
console.log(reject) // 一个失败状态(rejected)的promise对象
all
方法会收集所有promise
的成功的执行结果,并且all
方法内部的所有内容全部都是同步执行的,包括定时器,
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1)
}, 2000)
})
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2)
}, 1000)
})
Promise.all([p1, p2]).then((res) => {
console.log(res) // [1,2]
})
all
方法只会收集所有成功状态的执行结果,只要有一个promise
抛出reject
状态,那么收到的所有成功执行结果都会放弃,只接受失败的执行结果
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1)
}, 1000)
})
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject(2)
}, 2000)
})
Promise.all([p1, p2]).then((res) => {
console.log(res) //这里会抛出一个错误,错误内容为2
})
鉴于
all
方法的局限性,promise
有一个allSettled
方法,他不仅会收集成功的执行结果,还会收集失败的执行结果,同样是同步执行,并且返回一个数组
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1)
}, 1000)
})
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject(2)
}, 2000)
})
Promise.allSettled([p1, p2]).then((res) => {
console.log(res)
// [
// {status: 'fulfilled', value: 1},
// {status: 'rejected', reason: 2}
// ]
})
race
方法会收集所有promise
对象中,执行最快的那个,它不分resolve
和reject
,只要谁先执行完,就返回谁的执行结果
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
reject(1)
}, 1000)
})
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2)
}, 2000)
})
Promise.race([p1, p2]).then((res) => {
console.log(res) // 这里会抛出一个错误,错误内容为1
})
总结
promise
的then
,catch
,finally
是微任务promise
本身是同步的,但是他的成功的回调.then方法里面是异步的promise
的状态是不可逆的then
方法return
出去的值,会被后面的then
接收,如果后面还有跟then
的话,catch
同理promise
不管返回什么值,都会被包装成一个promise
对象,即使这个返回值是error
then
接收到的值,如果不是一个函数,会穿透到后面的then
promise
对象如果resolve
或者reject
的也是一个promise
对象,那么promise
对象的状态会由resolve
或者reject
的promise
对象的状态决定。
promise
,async/await
都属于微任务,定时器,计时器属于宏任务
微任务与宏任务-微任务会先于宏任务执行,微任务队列空了,才去执行下一个宏任务