您的位置:首页 > 移动开发 > IOS开发

代码问题之外,axios请求没进入then,进入catch的情况

2020-07-19 04:41 1561 查看

代码问题之外,axios请求没进入then,进入catch的情况

小编在一次工作中遇到了这个情况,有些项目对请求返回数据是有规范的,写服务的不知道,调服务的我
也不知道,就挠头苦想,花费了很多时间也没琢磨个所以然来。这里就举个栗子还原一下现场~

原因:前端项目对请求响应进行了过滤操作

这里前端发请求,then代码块没有代码错误

let url = '/fm/queryByNeName?neName=' + this.objName
Vue.axios.get(url).then(response => {
this.logger.info('**SUCCESS**')
if (response !== undefined && response !== null) {
this.List = response
}
}).catch(err => {
this.logger.info('--ERROR--' + err.status)
})

而且请求响应正常,数据也成功捞出来了

{"meta":{"code":"20000","message":"OK"},"data":[]}

这个时候在F12控制台可以看到,请求返回结果时却执行了catch,没执行then

ERROR--undefined

看似一切正常,但是结果没有得到我们想要的,原因是因为前端设置了类似响应过滤的操作。
直接上代码:

function handleResponseByBusinessCode (code, store, res) {
// 部分代码不方便展示就没有粘贴,不影响理解
if (_.isEqual('200', code)) {
return _.isNull(res.data) || (res instanceof Blob) || ((res + '') === '[object Blob]') ? res : res.data
} else if (_.isEqual('300', code)) {
return res
} else if (['304', '305', '306'].includes(code)) {
return res
} else {
Notice.error({
title: res.meta ? res.meta.message : '后台服务异常',
duration: 5
})

这个方法,会在执行then方法之前会对响应结果进行过滤,会根据状态码Code进行对应的操作,上面请求响应数据返回的状态码为20000,所以会执行else分支,之后就会进入catch,而不是then,这个时候就要找写这个接口的人告诉他返回数据里的Code值要按照项目规范写。到了这里相信你已经知道自己写的代码是正常,但是为什么没有执行then了吧。

============================== 一条美丽的分割线 =================================

  • 有些读者看到这就会发现,按照上面请求响应的数据结构,代码应该写成
    this.List = response.data
    才对呀,其实这里代码没有写错,原因也是因为这个方法对响应的数据进行了拆解重组,使得data摇身一变,成为了response。

温馨提示:在项目中如果遇到了自己花了较长时间也没有解决的问题,记得先要去问组里的大佬,可不能像小编一样埋头苦找呀!

💗💗这篇文章如果帮到了您,请给个鼓励吧!💗💗

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐