在src目录中建立plugins文件夹，在文件夹内建立axios.js文件
"use strict"; import Vue from 'vue';
import axios from "axios";
import {
getCookie,
delCookie,
showFullScreenLoading,
tryHideFullScreenLoading
} from '../utils/auth'
import {
Message,
} from 'element-ui' axios.defaults.headers.post['Content-Type'] = 'application/json'; let config = {
baseURL: 'http://jiekou.com/',
timeout: 60 * 1000, // Timeout
showLoading: true,//是否需要loading效果,如果不需要,则在请求时的第三个参数中传{showLoading:false}
// withCredentials: true, // Check cross-site Access-Control
}; const token = getCookie('token');
const _axios = axios.create(config); _axios.interceptors.request.use(
function (config) {
// Do something before request is sent
if (config.showLoading) {
showFullScreenLoading()
}
config.headers.common['Authorization'] = 'Bearer ' + token;
return config;
},
function (error) {
// Do something with request error
if (config.showLoading) {
tryHideFullScreenLoading();
}
return Promise.reject(error);
}
);
_axios.all = axios.all;
_axios.spread = axios.spread;
// Add a response interceptor
_axios.interceptors.response.use(
function (response) { if (config.showLoading) {
tryHideFullScreenLoading();
}
if (response.data.Type == 401) {
delCookie('token');
Message.error('登录信息失效,稍后将自动为您转至登录页,请重新登录!');
setTimeout(function () {
location.href = '/login';
}, 3000);
}else if(response.data.Type==500 || response.data.Type==203){
Message.error("警告：" + response.data.Content);
} return response;
},
function (error) {
if (config.showLoading) {
tryHideFullScreenLoading();
}
// Do something with response error
return Promise.reject(error);
}
); Plugin.install = function (Vue, options) {
Vue.axios = _axios;
window.axios = _axios;
Object.defineProperties(Vue.prototype, {
axios: {
get() {
return _axios;
}
},
$axios: {
get() {
return _axios;
}
},
});
}; Vue.use(Plugin) export default Plugin;
在axios文件中，我们引入了cookie操作和loading加载的方法。那么我们再来看看引入文件是什么。首先在src文件夹下创建utils文件夹，文件夹内创建auth.js。auth.js内是方法
import { Loading } from 'element-ui'
import _ from 'lodash'
export function getCookie(objName) {
var arrStr = document.cookie.split("; ");
for (var i = 0; i < arrStr.length; i++) {
var temp = arrStr[i].split("=");
if (temp[0] == objName) return unescape(temp[1]);
}
}
export function delCookie(name){
var date = new Date();
date.setTime(date.getTime() - 10000);
document.cookie = name + "=a; expires=" + date.toString();
}
/**
* 全局loading的封装
* **/
let loading;
let needLoadingRequestCount = 0;
function startLoading() {
loading = Loading.service({
lock: true,
text: '加载中……',
background: 'rgba(0, 0, 0, 0.7)'
})
}
const tryCloseLoading = () => {
if (needLoadingRequestCount === 0) {
loading.close()
}
}
export function showFullScreenLoading() {
if (needLoadingRequestCount === 0) {
startLoading()
}
needLoadingRequestCount++
}
export function tryHideFullScreenLoading() {
if (needLoadingRequestCount <= 0) return
needLoadingRequestCount--
if (needLoadingRequestCount === 0) {
_.debounce(tryCloseLoading, 300)();
}
}
/**
* 全局loading的封装
* **/
最后在main.js引入即可
import './plugins/axios'