在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'

 

---