ajax catch,promise记得写上catch

举个栗子,如果用户在没有登陆的条件下调用接口,那么所有接口都应该返回一个状态码表示用户没有登陆,此时需要跳转到登陆页进行登陆。

但是如果每次调用接口都需要判断一下,代码就会显得十分冗余,因此我们定义了一个apAjax.js,核心代码如下:

const apAjax = (options) => {

// 一些配置代码

return new Promise((resolve, reject) => {

axios({

method: options.method,

url: options.url,

data: options.data,

...

}).then((res) => {

resolve(res)

if(res.code == 401) {

// 跳转到登陆页

}

// 其他代码

}).catch((error) => {

reject(error)

})

})

}

调用

import apAjax from 'apAjax.js'

apAjax(options).then(res => {

// 在这里我们只需要处理接口正常返回的情况即可

// 因为未登陆的情况已经在apAjax.js里面统一处理了

})

看上去代码更加精简了,并且在全局有了统一的错误处理,但是当我们的项目接入sentry日志监控之后,却收到了下图的报错信息

5ff13821e60a

明明在封装的apAjax函数里面进行了catch错误捕获,为什么还会报错呢?

可以看到我们axios函数的then方法里面第一行代码就是resolve(res),这时候Promise的状态已经变成了resolved,这种改变是不可逆的,此时就算后面的其他代码抛出异常,也不会被catch方法捕获到。

另外,Promise对象的错误还有“冒泡”的性质,会一直向后传递,直到被捕获为止。但是上面的调用代码只有then没有catch。(以为被全局统一捕获了,所以没写)最终诞生了这个无家可归的异常。

不仅如此, Promise之间泾渭分明,内部Promise抛出的任何错误,外部Promise对象都无法感知并捕获。 同时,由于promise是异步的,try catch语句也无法捕获其错误。

因此养成良好习惯,不要偷懒,每一个Promise都请记得写上catch。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值