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

首先还原问题代码:

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

这个错误通常是因为在Promise链中没有添加适当的catch来处理错误导致的。根据提供的代码引用,可以看出在调用axios.get('/api')时,使用了.catch(err=>{})来捕获错误,并对错误进行处理。但是,在.catch内部没有对错误进行任何处理,导致错误被忽略了。为了解决这个问题,您可以在.catch内部添加适当的错误处理逻辑,或者在全局中统一捕获错误并进行处理。 一种方法是创建一个统一的错误处理函数,并将其作为全局的错误处理机制,以便捕获所有未处理的Promise拒绝错误。您可以在项目的入口文件中定义一个全局的错误处理函数,并使用window.addEventListener('unhandledrejection')来监听未处理的Promise拒绝错误。在错误处理函数中,您可以选择将错误信息打印到控制台,或者采取其他任何您认为合适的处理方式。 另一种方法是使用axios的interceptor拦截器来处理错误。您可以在axios实例中使用.interceptors.response.use()来拦截响应,并在拦截器中添加适当的错误处理逻辑。例如,您可以在拦截器中检查响应的状态码,如果不是200,则抛出一个错误并进行处理。 无论您选择哪种方法,都需要确保在Promise链中的每个地方都有适当的错误处理机制,以便捕获并处理错误,避免未捕获的Promise拒绝错误导致问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [axios控制台爆红问题Uncaught (in promise):xxx解决](https://blog.csdn.net/Suk__/article/details/114052919)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值