场景题：Promise的then和catch如何影响状态的变化？

最新推荐文章于 2024-11-24 14:30:00 发布

原创最新推荐文章于 2024-11-24 14:30:00 发布 · 372 阅读

0 ·

CC 4.0 BY-SA版权

ES6面试考点专栏收录该内容

6 篇文章

订阅专栏

本文介绍了Promise的then和catch方法在处理异步操作时的流程控制，包括正常返回和抛出错误的情况。通过示例解析了如何在链式调用中捕获和传递错误，以及如何影响后续then和catch的执行顺序。

第一题

Promise.resolve().then(() => {
        console.log(1)
}).catch(() => {
        console.log(2)
}).then(() => {
        console.log(3)
})

1 3

第二题

Promise.resolve().then(() => {
    console.log(1)
    throw new Error('error1')
}).catch(() => {
    console.log(2)
}).then(() => {
    console.log(3)
})

1 2 3

第三题

Promise.resolve().then(() => {
    console.log(1)
    throw new Error('error1')
}).catch(() => {
    console.log(2)
}).catch(() => {
    console.log(3)
})

1 2

原理

then正常返回resolved,里面有报错返回rejected

const p1 = Promise.resolve().then(() => {
    return 100
})
//console.log('p1',p1)//resolved触发后续then的回调
p1.then(()=>{
    console.log('123')
})

const p2 = Promise.resolve().then(() => {
    throw new Error('then error')
})
//console.log('p2', p2)//rejected触发后续catch的回调
p2.then(() => {
    console.log('456')
}).catch(err =>{
    console.error('err100',err)
})

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

const p3 = Promise.reject('my error').catch(err => {
    console.error(err)
})
//console.log('p3',p3)//resolved 触发then回调
p3.then(() => {
    console.log(100)
})

const p4 =Promise.reject('my error').catch(err => {
    throw new Error('catch err')
})
//console.log('p4',p4)//rejected触发后续catch的回调
p4.then(() => {
   console.log(200)
}).catch(() => {
    console.error('some error')
})