捕获axios中返回的Status Code404这类的状态码-案例
Posted JackieDYH
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了捕获axios中返回的Status Code404这类的状态码-案例相关的知识,希望对你有一定的参考价值。
捕获axios中返回的Status Code404这类的状态码
使用axios和后端进行交互的时候,有时候,后端返回的异常就需要在响应拦截器中去处理
- axios.interceptors.request.use(config=>,err=>)
- service.interceptors.response.use(response=>, err=>)
axios.interceptors.response.use
// 响应拦截器
axios.interceptors.response.use(
response =>
// 如果返回的状态码为201,说明接口请求成功,可以正常拿到数据
// 否则的话抛出错误
if (response.status === 201)
switch (response.data.errorCode)
case 403:
// 做一些自己的逻辑处理
console.log('没有权限');
// router.replace(
// path: '/',
// query:
// );
break;
default:
break;
return Promise.resolve(response.data);
else
return Promise.reject(response.data);
,
error =>
// 做一些自己的逻辑处理
console.log(error.response);
switch (error.response.status)
case 403:
console.log('没有权限');
router.push("/");
break;
default:
break;
return Promise.reject(error);
);
通过响应拦截器,在对应的位置就可以拦截到相应的错误码
import Vue from 'vue'
import axios from 'axios'
import store from '@/store'
import notification from 'ant-design-vue/es/notification'
import ACCESS_TOKEN from '@/store/mutation-types'
const baseURL = 'http://192.168.0.192:8080/api'
// 创建 axios 实例
const service = axios.create(
baseURL: baseURL, // api base_url
timeout: 6000 // 请求超时时间
)
const err = (error) =>
if (error.response)
const data = error.response.data
const token = Vue.ls.get(ACCESS_TOKEN)
if (error.response.status === 403)
notification.error(
message: 'Forbidden',
description: data.message
)
if (error.response.status === 401 && !(data.result && data.result.isLogin))
notification.error(
message: 'Unauthorized',
description: 'Authorization verification failed'
)
if (token)
store.dispatch('Logout').then(() =>
setTimeout(() =>
window.location.reload()
, 1500)
)
return Promise.reject(error)
// request interceptor
service.interceptors.request.use(config =>
const token = Vue.ls.get(ACCESS_TOKEN)
if (token)
config.headers['Access-Token'] = token // 让每个请求携带自定义 token 请根据实际情况自行修改
return config
, err)
// response interceptor
service.interceptors.response.use((response) =>
return response.data
, err)
const installer =
vm: ,
install: (Vue) =>
if (this.installed)
return
Object.defineProperties(Vue.prototype,
$http:
get: function get ()
return service
)
this.installed = true
export
installer as VueAxios
以上是关于捕获axios中返回的Status Code404这类的状态码-案例的主要内容,如果未能解决你的问题,请参考以下文章
vue 使用axios 报错Error: Request failed with status code 404
axios使用create创建实例并设置baseURL报错“Error: Request failed with status code 404“
Django,当我返回 status_code 404 或 500 时自定义 404/500