ant design vue 封装api
utils/request.js
```
import axios from 'axios'
import store from '@/store'
import storage from 'store'
import notification from 'ant-design-vue/es/notification'
import {
VueAxios
} from './axios'
import {
ACCESS_TOKEN
} from '@/store/mutation-types'
import {
getCookie
} from '@/utils/util'
// 创建 axios 实例
const request = axios.create({
// API 请求的默认前缀
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
},
baseURL: process.env.VUE_APP_API_BASE_URL,
timeout: 10000 // 请求超时时间
})
// 异常拦截处理器
const errorHandler = (error) => {
if (error.response) {
const data = error.response.data
// 从 localstorage 获取 token
const token = storage.get(ACCESS_TOKEN)
if (error.response.status === 403) {
notification.error({
message: 'Forbidden',
description: data.message
})
}
if (error.response.status === 308) {
console.log(error.response.status)
notification.error({
message: 'Forbidden',
description: data.message
})
setTimeout(() => {
window.location.href = '/'
}, 500)
}
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
request.interceptors.request.use(config => {
const token = storage.get(ACCESS_TOKEN)
// 如果 token 存在
// 让每个请求携带自定义 token 请根据实际情况自行修改
if (token) {
config.headers['token'] = token
}
return config
}, errorHandler)
// response interceptor
request.interceptors.response.use((response) => {
if (response.data.resultCode === 308) {
notification.error({
message: 'Forbidden',
description: response.data.msg
})
setTimeout(() => {
window.location.href = '/'
}, 500)
}
return response.data
}, errorHandler)
const installer = {
vm: {},
install(Vue) {
Vue.use(VueAxios, request)
}
}
export default request
export {
installer as VueAxios,
request as axios
}
```
api/request.js
```
import request from '@/utils/request'
import Qs from 'qs'
import storage from 'store'
import {
ACCESS_TOKEN
} from '@/store/mutation-types'
export const api = {
UserInfo: '/user/info',
}
const token = storage.get(ACCESS_TOKEN)
window.sessionStorage.setItem('token', token)
export function postParameter(url, params) {
return request({
url: url,
method: 'post',
// headers: {
// 'token': token
// },
data: Qs.stringify(params)
})
}
export function postJson(url, params) {
return request({
url: url,
headers: {
'Content-Type': 'application/json',
// 'token': token
},
method: 'post',
data: params
})
}
export function getParameter(url, params) {
return request({
url: url,
method: 'get',
headers: {
'Content-Type': 'application/json;charset=UTF-8',
'token': token
},
params: params
})
}
```
