首页 » 文章 » 文档 » js 异步问题 » Promise 有哪三种状态?如何变化?

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()
    })
})
// p2 Promise {<pending>} 一开始打印时是 pending,最终是 resolved 状态
console.log('p2', p2)
// p2-setTimeout Promise {<resolved>: undefined}
setTimeout(() => console.log('p2-setTimeout', p2))

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

状态的表现

  • 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 状态

»js 异步问题

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Scroll to Top