axiso封装

import axios from 'axios';
import {Message } from 'element-ui'//element-ui提示框组件
import config from './config';
import {removeToken, getToken } from "@/utils/token";//获取token
import router from '@/router'

// 使用vuex做全局loading时使用
// import store from '@/store'

export default function $axios(options) {
return new Promise((resolve, reject) => {
const instance = axios.create({
baseURL: config.baseUrl,
headers: config.headers,
timeout: config.timeout,
withCredentials: config.withCredentials
})
// request 拦截器
instance.interceptors.request.use(
config => {
let token = getToken()
if (token) {
config.headers.Authorization = `Bearer ${token}`
} else {
// 重定向到登录页面
// router.push('/')
}
// 3. 根据请求方法，序列化传来的参数，根据后端需求是否序列化
if (config.method === 'post') {
// config.data = qs.stringify(config.data)
}
return config
},
error => {
// 请求错误时
console.log('request:', error)
// 1. 判断请求超时
if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
console.log('timeout请求超时')
// return service.request(originalRequest);// 再重复请求一次
}
// 2. 需要重定向到错误页面
const errorInfo = error.response
console.log(errorInfo)
if (errorInfo) {
error = errorInfo.data // 页面那边catch的时候就能拿到详细的错误信息,看最下边的Promise.reject
const errorStatus = errorInfo.status; // 404 403 500 ...
router.push({
path: `/error/${errorStatus}`
})
}
return Promise.reject(error) // 在调用的那边可以拿到(catch)你想返回的错误信息
}
)
// response 拦截器
instance.interceptors.response.use(
response => {
let data;
// IE9时response.data是undefined，因此需要使用response.request.responseText(Stringify后的字符串)
if (response.data == undefined) {
data = JSON.parse(response.request.responseText)
} else {
data = response.data
}
// 根据返回的code值来做不同的处理
switch (data.code) {
case 401:
console.log(data.desc)
break;
case 0:
store.commit('changeState')
// console.log('登录成功')
default:
}
return data
},
err => {
if (err && err.response) {
switch (err.response.status) {
case 400:
err.message = '请求错误'
break
case 401:
Message({
type: 'error',
message: '未授权，请登录'
})
err.message = '未授权，请登录'
removeToken()
router.currentRoute.path !== 'login' &&
router.replace({
path: '/login',
query: { redirect: router.currentRoute.path },
})
break
// case 403:
// err.message = '拒绝访问'
// break
// case 404:
// err.message = `请求地址出错: ${err.response.config.url}`
// break
// case 408:
// err.message = '请求超时'
// break
// case 500:
// err.message = '服务器内部错误'
// break
// case 501:
// err.message = '服务未实现'
// break
// case 502:
// err.message = '网关错误'
// break
// case 503:
// err.message = '服务不可用'
// break
case 504:
Message({
type: 'error',
message: '网关超时'
})
err.message = '网关超时'
break
default:
Message({
type: 'error',
message: err.response.data.message,
})
}
}
console.error(err)
return Promise.reject(err) // 返回接口返回的错误信息
}
)
// 请求处理
instance(options).then(res => {
resolve(res)
return false
}).catch(error => {
reject(error)
})
})
}

使用