首先还原问题代码:

    err => {
        return Promise.reject(err)
    }

在axios的拦截器中有这么一句代码Promise.reject(new Error('错误内容')),用来抛出错误并打印在控制台并阻止代码往下继续运行,但是实际中我们并不想把这玩意儿打印出来:Uncaught (in promise)

并且我们在调用请求时:

axios.get('/api').then(res=>{

}).catch(err=>{
    // 处理捕获的错误err
})

我们每发一个请求都要戴上catch去捕获抛出的错误,但实际上我们并不想也并没有对这个err错误进行过啥处理,而且他还会在控制台上打印出来,强迫症就贼难受,所以我们要如何实现全局捕获它统一处理呢?下面直接上代码:

/**
 * 将axios实例再封装一层promise,将响应结果做为resolve返回出来
 * 手动调用实例的catch,抓所有axios的Promise.reject在控制台抛出的爆红
 * 所有的Promise.reject都会走这个catch,我们对错误err不做任何输出或其它处理,爆红就没了
 */
const _ajax = function (obj) {
    return new Promise((resolve) => {
        _fetch(obj)// 这里的_fetch是axios.create()创建的axios实例对象
            .then(res => {
                resolve(res)
            })
            /* eslint-disable */
            .catch(err => {
                // console.log(err)
                // reject(err)
                // console.log(err.messagae)
                // 这里对错误啥也不干,控制台就不爆红了
            })
    })
}

// 将重新配置后的axios暴露出去
export default _ajax

这样用promise二次封装包一层后,我们就不用每次请求时都在后面catch一下了,控制台的打印爆红也无辽~

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐