vue 请求拦截 接口报错 自动跳转到503提示页面
做项目的时候,有时候接口报错,或者服务器挂了,我们需要做一个错误页面,告诉用户此时服务器挂了。在网上找了一下,并没有清晰易懂的文档,我就把我的项目里面用到的分享出来。新建一个请求拦截js文件,代码如下:import axios from 'axios'import router from '../router.js'// 创建 axios 实例export const Axios = ...
·
做项目的时候,有时候接口报错,或者服务器挂了,我们需要做一个错误页面,告诉用户此时服务器挂了。在网上找了一下,并没有清晰易懂的文档,我就把我的项目里面用到的分享出来。
新建一个请求拦截js文件,代码如下:
import axios from 'axios'
import router from '../router.js'
// 创建 axios 实例
export const Axios = axios.create({
timeout: 15000
})
window.cancelInterface = []
//POST传参序列化(添加请求拦截器)
// 在发送请求之前做某件事
axios.interceptors.request.use(
config => {
config.cancelToken = new axios.CancelToken(cancel => {
if (!window.cancelInterface) {
window.cancelInterface = []
}
window.cancelInterface.push({
cancel
})
})
// console.log('config.token', config)
if (config.token != 'none') {
if (localStorage.token) {
config.headers.Authorization = 'Bearer ' + localStorage.token
}
}
return config
},
error => {
return Promise.reject(error)
}
)
//返回状态判断(添加响应拦截器)
axios.defaults.headers['Content-Type'] = 'application/json; charset=UTF-8'
axios.interceptors.response.use(
res => {
if (res.data.code == '401') {
router.push({
path: '/login',
query: {
redirect: location.hostname
}
})
return
}
//503跳转到错误页
if (res.data.code == '503') {
router.push({
path: '/error',
query: {
redirect: location.hostname
}
})
return
}
return res
},
error => {
if (error.response.status === 401 || error.response.status === 403) {
router.push({
path: '/login',
query: {
redirect: location.hostname
}
})
} else if (error.response.status === 503 ) {
router.push({
path: '/error',
query: {
redirect: location.hostname
}
})
} else if (error.response.status === 500) {
// 服务器错误
return Promise.reject(error.response.data)
}
// 返回 response 里的错误信息
return Promise.reject(error.response.data)
}
)
// 将 Axios 实例添加到Vue的原型对象上
export default {
install(Vue) {
Object.defineProperty(Vue.prototype, '$http', {
value: Axios
})
}
}
如此,大功告成
更多推荐
已为社区贡献16条内容
所有评论(0)