Request初始化
Import
import axios from 'axios'
import {Message} from 'element-ui'
import store from '@/store'
import {getToken} from '@request/token'
axios
是一个基于 Promise 的 HTTP 库,用于浏览器和 Node.js。
Message
是 element-ui
提供的消息提示组件。
store
是 Vuex 的状态管理实例。
getToken
是一个方法,用于获取当前用户的 token。
创建axios实例
const service = axios.create({
baseURL: process.env.BASE_API,
timeout: 10000
})
baseURL
指定了请求的基础 URL,process.env.BASE_API
读取环境变量中的 API 地址。
timeout
设置请求的超时时间为 10000 毫秒(10 秒)。
请求拦截器
service.interceptors.request.use(config => {
if (store.state.token) {
config.headers[‘Oauth-Token’] = getToken()
}
return config
}, error => {
Promise.reject(error)
})
在每个请求发送之前,拦截器会检查 Vuex store 中是否存在 token
。
如果存在 token
,则在请求头中添加 Oauth-Token
。
响应拦截器
service.interceptors.response.use(
response => {
if (response.headers['session_time_out'] == 'timeout') {
store.dispatch('fedLogOut')
}
const res = response.data;
if (res.code !== 0) {
if (res.code === 90001) {
return Promise.reject('error');
}
if (res.code === 20001) {
console.info("用户未登录")
Message({
type: 'warning',
showClose: true,
message: '未登录或登录超时,请重新登录哦'
})
return Promise.reject('error');
}
if (res.code === 70001) {
console.info("权限认证错误")
Message({
type: 'warning',
showClose: true,
message: '你没有权限访问哦'
})
return Promise.reject('error');
}
return Promise.reject(res.msg);
} else {
return response.data;
}
},
error => {
Message({
type: 'warning',
showClose: true,
message: '连接超时'
})
return Promise.reject('error')
})
- 在每个响应到达时,首先检查响应头中是否包含
session_time_out
,若其值为timeout
,触发 Vuex 的fedLogOut
方法。 - 检查响应数据
res
的code
属性:- 如果
code
不为 0,处理各种错误情况:90001
: Session 超时,返回被拒绝的 Promise。20001
: 用户未登录,显示警告消息,并返回被拒绝的 Promise。70001
: 权限认证错误,显示警告消息,并返回被拒绝的 Promise。- 其他非零
code
,返回错误信息。
- 如果
code
为 0,直接返回响应数据。
- 如果
- 如果响应出错(例如请求超时),显示警告消息,并返回被拒绝的 Promise。
export default service
export default service