Promise 有哪三种状态？如何变化？

三种状态：pending resolved rejected

状态的变化：pending —> resolved 或 pending —> rejected，代码演示：

const p1 = new Promise((resolve, reject) => {
})
console.log('p1', p1) // p1 Promise {<pending>}
const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve()
    })
})
// 一开始打印时是 pending，最终是 resolved 状态
console.log('p2', p2) // p2 Promise {<pending>}
setTimeout(() => console.log('p2-setTimeout', p2)) // p2-setTimeout Promise {<resolved>: undefined}
const p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject()
    })
})
// 一开始打印时是 pending，最终是 rejected 状态
console.log('p3', p3) // p3 Promise {<pending>}
setTimeout(() => console.log('p3-setTimeout', p3)) // p3-setTimeout Promise {<rejected>: undefined}

状态的表现

• pending 状态，不会触发 then 和 catch
• resolved 状态，会触发后续的 then 回调函数
• rejected 状态，会触发后续的 catch 回调函数，代码演示：

const p1 = Promise.resolve(100)
console.log('p1',p1) // p1 Promise {<resolved>: 100}
p1.then(data=>{
    console.log('data1',data) // data1 100
}).catch(err=>{
    console.error('err1',err) // 不会触发
})
const p2 = Promise.reject('err')
console.log('p2',p2) //p2 Promise {<rejected>: "err"}
p2.then(data=>{
    console.log('data2',data) // 不会触发
}).catch(err=>{
    console.error('err2',err) // err2 err
})

then 和 catch 如何影响状态的变化

• then 正常返回 resolved，里面有报错则返回 rejected

const p1 = Promise.resolve().then(() => {
    return 100
})
// 一开始打印时是 pending，最终是 resolved 状态，会触发后续 then 的回调
console.log('p1', p1)
p1.then(() => {
    console.log('123') //123
})
const p2 = Promise.resolve().then(() => {
    throw new Error('err')
})
// 一开始打印时是 pending，最终是 rejected 状态，会触发后续 catch 的回调
console.log('p2', p2)
p2.then(() => {
    console.log('123') // 不会触发
}).catch(err => {
    console.error('err2', err) // err2 Error: err
})

• catch 正常返回 resolved，里面有报错则返回 rejected

const p3 = Promise.reject('my error').catch(err=>{
    console.error(err)
})
// 一开始打印时是 pending，最终是 resolved 状态，会触发后续 then 的回调
console.log('p3',p3)
p3.then(() => {
    console.log('333') //333
})
const p4 = Promise.reject('my error').catch(err=>{
    throw new Error('catch err')
})
// 一开始打印时是 pending，最终是 rejected 状态，会触发后续 catch 的回调
console.log('p4',p4)
const p5 = p4.then(() => {
    console.log('444') // 不会触发
}).catch(err => {
    console.error('err4', err) // err4 Error: catch err
})
console.log('p5',p5) // 一开始打印时是 pending，最终是 resolved 状态