Promise 状态的表现与变化以及执行顺序

Promise三种状态：

pending 过程中
resolved 已成功
rejected 已拒绝

状态的表现

pending状态，不会触发then和catch
resolved状态，会触发后续的then回调函数
rejected状态，会触发后续的catch的回调函数

状态变化：

pending–> resolved 成功.
pending–> rejected 失败.
变化不可逆.

// pending状态的Promise
const p1 = new Promise((resolve, reject) => {})
console.log('p1', p1) //PromiseStatus: pending


// pending状态的Promise -> resolved状态的Promise：
const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve() // Promise.resolve返回一个解析过的Promise对象,状态为resolved
    });
})
console.log('p2', p2) //开始打印时为：pending状态
setTimeout(() => {
    console.log('p2-setTimeout', p2)
}); //计时器回调成功：resolved状态


// pending状态的Promise -> rejected状态的Promise：
const p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject() //Promise.reject返回一个解析过的Promise对象,状态为rejected
    });
})
console.log('p3', p3) //开始打印时为：pending状态
setTimeout(() => {
    console.log('p3-setTimeout', p3)
}); //计时器回调成功：rejected状态

then和catch对状态的影响： *****

1. then正常返回resolved状态的Promise，里面有报错则返回rejected状态的Promise.

const p1 = Promise.resolve().then(()=>{
    return 100
})
p1.then(() => { // p1是: then正常返回resolved状态的Promise
    console.log('p1 then') //打印p1 then :resolved触发then回调
})

const p2 = Promise.resolve().then(() => {
    throw new Error('then error')
})
p2.then(() => { //p2是 :then里面有报错则返回rejected状态的Promise
    console.log('p2 then') 
}).catch(() => {
    console.log('p2 catch') //打印p2 catch :rejected触发catch回调
})

2. catch正常返回resolved状态的Promise，里面有报错则返回rejected状态的Promise.

const p3 = Promise.reject('err').catch(err => {
    console.error(err)
})
p3.then(() => { //p3是: catch正常返回resolved状态的Promise
    console.log('p3 then') //打印 p3 then :resolved触发then回调
})

const p4 = Promise.resolve().then(() => {
    throw new Error('then error')
})
p4.then(() => { //p4是 :catch里面有报错则返回rejected状态的Promise
    console.log('p4 then')
}).catch(() => {
    console.log('p4 catch') //打印p4 catch :rejected触发catch回调
})

Promise执行顺序常见题目与解析

Promise.resolve().then(() => { //Promise.resolve()返回的 resolve状态的Promise
    console.log(1) // resolved 触发then回调 : console.log(1);then正常返回resolved状态的Promise
}).catch(()=>{
    console.log(2)
}).then(() => {  //resolved 触发then回调: console.log(3)
    console.log(3)
})
// 1 3

Promise.resolve().then(() => { // Promise.resolve()返回的 resolve状态的Promise
    console.log(1) // resolved 触发then回调 : console.log(1)
    throw new Error('error1') // then里面有报错则返回rejected状态的Promise
}).catch(() => { // rejected 触发catch回调: console.log(2)
    console.log(2) // catch正常返回resolved状态的Promise
}).then(() => { // resolved 触发then回调: console.log(3)
    console.log(3)
})
// 1 2 3


Promise.resolve().then(() => { // Promise.resolve()返回的 resolve状态的Promise
    console.log(1) // resolved 触发then回调 : console.log(1)
    throw new Error('error1') // then里面有报错则返回rejected状态的Promise
}).catch(() => { // rejected 触发catch回调: console.log(2)
    console.log(2) // catch正常返回resolved状态的Promise
}).catch(() => { // resolved 触发then回调，无法触发catch回调
    console.log(3)
})
//  1 2