Promise then中拦截错误与catch的区别

2018-08-18

Promise中的then接收两个函数，第一个函数的参数为成功的结果，也就是resolve的值，第二个函数中的参数为失败的结果，也就是reject的值，同时如果失败了，也能从catch中获取到结果，都能获取错误信息，那两者有什么区别呢？

其实简单一句话就是，catch不仅能获取到promise中的错误，同时也能获取到then第一个函数中的错误，而第二个函数拦截到的错误信息，只能是promise本身的错误

代码简单解释一下

new Promise((resolve, reject) => {
    let num = Math.random()*2
    if(num < 1){
        resolve('200 success')
    }else{
        reject('sorry timeout')
    }
}).then((res) => {
    console.log("成功了 " + res)
    throw new Error('haha error')
}, (err) => {
    console.log("失败了 " + err)
})

当num<1时，会打印出“成功了 200 success”，当num>1时，会打印出“失败了 sorry timeout”，如果这样写，无论什么时候，都不会打印出then第一个函数里throw出来的错误

如果把代码换成这样

new Promise((resolve, reject) => {
    let num = Math.random()*2
    if(num < 1){
        resolve('200 success')
    }else{
        reject('sorry timeout')
    }
}).then((res) => {
    console.log("成功了 " + res)
    throw new Error('haha error')
}).catch((err) => {
    console.log("失败了 " + err)
})

当num<1时，不仅能打印出“成功了 200 success”，还能够打印出“失败了 haha error”，当num>1时，也能打印出“失败了 sorry timeout”

如果then中的第二个函数和catch同时写的话，又会打印出什么呢，也就是这样

new Promise((resolve, reject) => {
    let num = Math.random()*2
    if(num < 1){
        resolve('200 success')
    }else{
        reject('sorry timeout')
    }
}).then((res) => {
    console.log("成功了 " + res)
    throw new Error('haha error')
}, (err1) => {
    console.log("err1失败了 " + err1)
}).catch((err2) => {
    console.log("err2失败了 " + err2)
})

当num>1时，只会打印出“err1失败了 sorry timeout”，当num<1时，则会打印出“成功了 200 success”，以及“err2失败了 haha error”

当then的第二个函数与catch同时存在时，then的第二个函数会拦截到错误信息，而不会再走到catch中

平时多读一下Promise的官方文档，就能对Promise有更深层的理解，这里只是简单说了一下日常开发中所经历的一些小问题