axios拦截器之axios.interceptors.request.use和axios.interceptors.response.use(附示例代码)
1.请求拦截器(在请求之前进行一些配置)axios.interceptors.request.use(function(config){//比如是否需要设置 tokenconfig.headers.token='wwwwwsdsdf'return config})2.响应了拦截器(在响应之后对数据进行一些处理)axios.interceptors.response.use(res=>{let
·
1.请求拦截器(在请求之前进行一些配置)
axios.interceptors.request.use(function(config){
//比如是否需要设置 token
config.headers.token='wwwwwsdsdf'
return config
})
2.响应了拦截器(在响应之后对数据进行一些处理)
axios.interceptors.response.use(res=>{
let data=res.data
//比如响应一些报错信息
return data
})
完整的示例代码来了,根据自己的需求进行修改哦
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
// eslint-disable-next-line no-unused-vars
import { delSessionStorage, delLocalStorage } from '@/utils/storage'
import router from '@/router'
import { SingleMessage } from '@/utils/messageBox'
// 请求接口 API 地址
// const VUE_APP_BASE_API = 'xxx'
const CancelToken = axios.CancelToken
const pending = []
//引入的
// 创建一个axios实例
const service = axios.create({
// 因为项目前端和后台是放在一起的,所以这里直接用 VUE_APP_CONTEXT_PATH 即可,如果分开部署用 VUE_APP_BASE_API
baseURL: process.env.NODE_ENV === 'development' ? '' : process.env.VUE_APP_CONTEXT_PATH, // url = base url + request url
withCredentials: true, // 是否携带cookie
timeout: 5000 // 请求超时时间
})
// request interceptor
service.interceptors.request.use(
config => {
// 在请求发送前做的操作
config.cancelToken = new CancelToken(function executor(c) {
// executor 函数接收一个 cancel 函数作为参数
pending.push(c)
})
return config
},
error => {
// do something with request error
SingleMessage({
title: '请求错误',
message: '登录失败!',
type: 'error',
duration: 3 * 1000
})
return Promise.reject(error)
}
)
// response interceptor
let int = null
service.interceptors.response.use(
/**
* 如果您想要获取诸如头或状态之类的http信息
* 就 return response => response
*/
/**
*通过自定义代码确定请求状态
*这里只是一个例子
*您还可以通过HTTP状态代码判断状态
*/
response => {
var res = response.data
if (res.status === 200) {
if (res.msg !== '获取成功!') {
SingleMessage({
message: res.msg || '成功',
type: 'success',
duration: 3 * 1000
})
}
} else if (res.status === 501) {
SingleMessage({
message: res.msg || '操作被取消,暂时不能操作',
type: 'warning',
duration: 3 * 1000
})
} else if (res.status === 500 && res.msg === '未知异常!请重试,仍不能操作请联系管理员') {
SingleMessage({
message: res.msg || '未知异常!请重试,仍不能操作请联系管理员',
type: 'error',
duration: 3 * 1000
})
}
return response
},
error => {
if (error.response) {
const res = error.response.data
if (res.status === 401) {
while (pending.length > 0) {
pending.pop()('请求中断')
}
MessageBox.confirm(
'您的登录信息已过期,您可以取消以停留在此页,或重新登录',
'系统提示',
{
confirmButtonText: '重新登录',
cancelButtonText: '取消',
type: 'warning'
}
)
.then(() => {
// 定义定时器去主动点击遮罩层让第一个弹窗后的弹窗自己主动关闭
int = setInterval(() => {
const ele = document.getElementsByClassName('v-modal')[0]
// 当检测到document中没有遮罩层的时候 清除计时器
if (!ele) {
clearInterval(int)
} else {
// 进行点击,触发弹窗的关闭
ele.click()
}
}, 0)
// 清除浏览器保存的信息
delSessionStorage()
// 清除搜索组件保存的信息,防止显示旧数据
delLocalStorage('Enterprise')
// 删除路由和 vuex 的store
delLocalStorage('router')
delLocalStorage('store')
router.replace('/login')
})
.catch(() => { })
} else if (res.status === 400) {
SingleMessage({
message: res.msg || '客户端错误',
type: 'error',
duration: 3 * 1000
})
} else if (res.status === 403) {
SingleMessage({
message: res.msg || '您的权限不足',
type: 'error',
duration: 3 * 1000
})
} else if (res.status === 404) {
SingleMessage({
message: '网络请求不存在',
type: 'error',
duration: 3 * 1000
})
} else if (res.status === 500) {
SingleMessage({
message: res.msg || '服务器异常',
type: 'error',
duration: 3 * 1000
})
} else if (res.status === 501) {
SingleMessage({
message: res.msg || '您的操作被取消或不允许提交',
type: 'warning',
duration: 3 * 1000
})
} else {
SingleMessage({
message: '服务器正在开小差。。。。',
type: 'error',
duration: 3 * 1000
})
}
} else if (error.message.includes('timeout')) {
SingleMessage({
message: '请求超时,请检查网络连接!',
type: 'error',
duration: 3 * 1000
})
}
// console.log(error)
return Promise.reject(error)
// return new Promise(() => {
// console.dir(error, '错误')
// })
}
)
更多推荐
已为社区贡献3条内容
所有评论(0)