问题:后端不以200-300标记接口成功失败 以自定义的状态success 导致拦截器拦不到错误
解决办法:
我们可以在拦截器中做后端自定义状态码判断,如果成功,也就是success字段为true,则
return response.data
如果失败,也就是success字段为false,则可以提示一下用户并且手动 return一个Promise.reject()
,让错误可以被抛出,不静默通过
代码展示:
import { Message } from 'element-ui'
// 响应拦截器
service.interceptors.response.use(
response => {
// 解构后端字段
// success: 接口是否成功
// data: 接口数据
// message: 接口提示文案
const { success, data, message } = response.data
if (success) {
return data
} else {
// 错误提示用户
Message.warning(message)
// 手动抛出错误
return Promise.reject(message)
}
},
error => {
return Promise.reject(error)
}
)
总结:
- 谨记axios响应拦截器中的成功失败回调是以http状态码作为判断条件进行自动调用,当http状态码为
200-300
之间,会执行成功回调;当http状态码不在这个区间会执行失败回调- 在实际开发的过程中,接口是否成功有时候后端并不是一定以200-300作为接口标准的,他会自定义,此时需要我们前端,根据自定义状态字段,自行处理成功和失败的状态