Promise的then函数的err和catch有什么区别?

// 首先了解catch是什么? 是语法糖!!!
new Promise(() => {
}).catch(() => {
})
// 等同于
new Promise(() => {
}).then(null, () => {
})

我们将then的第一个参数叫做success回调,第二个参数叫做err回调

一、catch在then之后

1、then写了err回调,则错误由err回调解决
2、then没写err回调,则错误由catch解决
3、如果err回调也抛出错误,则错误由catch解决
4、如果catch之前有多个then,只要有一个then抛出错误,就会直接走到catch
5、同理,只要catch之前有一个err回调,则错误由err回调处理,并且中间的then不会被执行,但是err后面的thensuccess会被执行

二、catch在then之前

1、错误由catch解决,但是thensuccess也会执行
2、可以在then之后继续写catch,处理后续then抛出的错误

三、题外话:如果then的success也返回Promise呢?

1、那么这个thenstate将由返回的Promisethen决定
2、并且会将返回的Promisethen放入微任务,既Promise.then(()=>{})整体放入微任务,当微任务执行到Promise.then(()=>{})时,这里thensuccess会先放入微任务
3、需要强调的是,只有Promisestate变为fulfilledrejectedthen才会执行

详细解析请看下方代码!!!

Promise.resolve()
.then(()=>{
    console.log(1);
    return Promise.resolve(5) // then的success也返回Promise
})
.then((res => {
    console.log(res);
}))

Promise.resolve()
.then(() => {
    console.log(2);
})
.then(() => {
    console.log(3);
})
.then(() => {
    console.log(4);
})

/**
 * 执行过程是 
 * 1、将 ()=>{
            console.log(1);
            return Promise.resolve(5)
        } 放入微任务队列
    
    2、将 () => {
            console.log(2);
        } 放入微任务队列

    3、执行 console.log(1);,将 return Promise.resolve(5) 变为 Promise.then(()=>{ return 5 }) 并放入微任务队列
    4、执行 console.log(2);
    5、将 () => {
            console.log(3);
        } 放入微任务队列
    6、执行 Promise.then(()=>{ return 5 }),将 ()=>{ return 5 } 放入微任务队列
    7、执行 console.log(3);
    8、将 () => {
            console.log(4);
        } 放入微任务队列
    9、执行 ()=>{ return 5 }
    10、将 (res => {
            console.log(res);
        }) 放入微任务队列
    11、执行 console.log(res);
    12、输出结果为1,2,3,4,5
 */

    
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容