axios控制台爆红问题Uncaught (in promise):xxx解决

最新推荐文章于 2023-11-12 21:48:17 发布

williamyi74

最新推荐文章于 2023-11-12 21:48:17 发布

阅读量1.1w

点赞数 6

CC 4.0 BY-SA版权

分类专栏： axios

本文链接：https://blog.youkuaiyun.com/Suk__/article/details/114052919

axios 专栏收录该内容

2 篇文章

订阅专栏

博客指出axios拦截器中Promise.reject抛出的错误会打印在控制台，且每次请求需用catch捕获但又不做处理，影响体验。介绍了通过promise二次封装实现全局捕获错误统一处理，避免每次请求都用catch及控制台打印爆红的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先还原问题代码:

    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一下了,控制台的打印爆红也无辽~