Vue全局捕获后端接口异常并将提示语句显示
Vue 全局捕获后端接口抛出的error,并以提示框的形式显示这个是比较常见的问题,但这种东西一般都在配置项里,如果不是很了解配置项的话还是不容易找到对应的位置提示类型首先得知道vue+axois 封装请求+拦截器的配置,然后一般全局捕获在instance.interceptors.response.use()中去做相应的处理。其中的response参数,就是每次调用接口可以触发的后台接口返回的状
·
Vue 全局捕获后端接口抛出的error,并以提示框的形式显示
这个是比较常见的问题,但这种东西一般都在配置项里,如果不是很了解配置项的话还是不容易找到对应的位置
提示类型
首先得知道vue+axois 封装请求+拦截器的配置,然后一般全局捕获在instance.interceptors.response.use()中去做相应的处理。其中的response参数,就是每次调用接口可以触发的后台接口返回的状态码以及值
instance.interceptors.response.use(
(response) => {
//此处为全局捕获接口没请求成功时候得异常,response.data.error.message是后端返回的异常提示语句
if (response.data.code != '200') {
console.log(response.data)
Vue.prototype.$message ({
message:response.data.error.message,
type: 'error'
});
}
if (loadingInstance) loadingInstance.close()
const { data, config } = response
const { code, msg } = data
// 操作正常Code数组
const codeVerificationArray = isArray(successCode)
? [...successCode]
: [...[successCode]]
// 是否操作正常
// console.log(codeVerificationArray)
if (codeVerificationArray.includes(code)) {
return data
} else {
handleCode(code, data)
// 报错退出登录
router.push({ path: '/login' }).catch(() => {})
return Promise.reject(
'vue-admin-beautiful请求异常拦截:' +
JSON.stringify({ url: config.url, code, msg }) || 'Error'
)
}
},
更多推荐
已为社区贡献5条内容
所有评论(0)