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

Posted 2022-12-15 loushumei

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