Vue + element axios请求二次封装

简单封装get，post请求，携带token控制

下载axios，element，Vue-router，并在main.js中配置，不需要的可注销内容

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import common from './api/common'
import vuexlsx from 'vue-xlsx-table'
// 引入element UI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App';
// 引入路由
import router from './router';
// 引入状态管理
import store from './vuex/store';
// 引入icon
import './assets/icon/iconfont.css'
//
import axiosApi from './api/axios'

import  session from 'vue-session'
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
Vue.prototype.$common = common

import axios from 'axios';
Vue.prototype.$axios = axios;

Vue.config.productionTip = false;

// 使用element UI
Vue.use(ElementUI);
Vue.use(vuexlsx,{rABS:false});
Vue.use(axiosApi);
Vue.use(session);
// 过滤器
import * as custom from './utils/util'
import {getCookie} from "./utils/util";

Object.keys(custom).forEach(key => {
    Vue.filter(key, custom[key])
})

// 路由守卫
router.beforeEach((to, from, next) => {
  let token = getCookie('userToken');
  if (to.matched.length != 0) {
        if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
          if (token){
            next();
          }else {
            next();
            if (to.path!=('/login')){
              next({
                path: '/login'
              })
            }
          }
            // if (Boolean(localStorage.getItem("userInfo"))) { // 通过vuex state获取当前的user是否存在
            //   next();
            // } else {
            //   next()
            //   if (to.path!=('/login')){
            //     next({
            //       path: '/login'
            //     })
            //   }
            // }
        } else {
          if (Boolean(localStorage.getItem("userInfo"))) { // 判断是否登录
                if (to.path != "/" && to.path != "/login") { //判断是否要跳到登录界面
                    next();
                } else {
                    /**
                     * 防刷新，如果登录，修改路由跳转到登录页面，修改路由为登录后的首页
                     */
                    next({
                        path: '/goods/Goods'
                    })
                }
            } else {
                next();
            }
        }
    } else {
        next({
            path: '/login',
            query: { redirect: to.fullPath } // 将跳转的路由path作为参数，登录成功后跳转到该路由
        })
    }
})

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    store, //使用store vuex状态管理
    components: { App },
    template: '',
    data: {
        // 空的实例放到根组件下，所有的子组件都能调用
        Bus: new Vue()
    }

})

自定义方法需要按照main.js配置路径，复制即用，含element请求错误提示

/**
 * config=>baseURL 公用变量 也可以在当前方法以  const baseURL = 'http://xxxx/api/'
 * ElementUI 引入element-ui  根据后台返回,对其进行消息 提示判断
 * */
import {baseURL} from "./config"; 
import axios from 'axios' 
import {getCookie,delCookie} from "../utils/util";
import ElementUI from 'element-ui'
import router from  'vue-router'
import 'element-ui/lib/theme-chalk/index.css'



//请求
axios.interceptors.request.use(
  config => {
    var token = getCookie('userToken');
    if (token != ''){
        let token = JSON.parse(getCookie('userToken')).token;
          config.headers = {
         "X-Authorization":"Bearer " + token
        };
    };
    return config
  },function(error){
  return Promise.reject(error)}
)



//响应
axios.interceptors.response.use(function (response) {
  //success 此处可以对数据进行处理
  return response
}, function (error) {
  //error  此处可以对数据进行处理
  if (error && error.response.status){
    switch (error.response.status) {
      case 400:
        ElementUI.Message.error('400');
        break;
      case 401:
        ElementUI.Message.error(error.response.data.message);
        // delCookie('userToken');
        break;
      case 403:
        ElementUI.Message.error('403');
        break;
      case 404:
        ElementUI.Message.error('404');
        break;
      default :
        ElementUI.Message.error('其他错误')
    }
  }
  // if (error)
  return Promise.reject(error)
})


/**
 * 请求失败
 * */
function errorState (response) {
  console.log(response);
  return response
}

/**
 * 请求成功返回值
 *
 * */
function successState (res) {
  if (res.data.code == 0) {

  }else if(res.data.success == false){
    ElementUI.Message({message: res.data.message,type: 'warning'})
  }
  return res
}

/**
 * axios 封装
 *
 * */
function apiAxios (method, url, params) {

  let httpDefault = {
    method: method,
    baseURL: baseURL,
    url: url,
    params: method === 'GET' || method === 'DELETE' ? params : null,
    data: method === 'POST' || method === 'PUT' ? params : null,
    timeout: 10000
  }

  return new Promise((resolve, reject) => {
    axios(httpDefault)
      .then((res) => {
        successState(res)
        resolve(res)
      }).catch((response) => {
      console.log(response);
      errorState(response)
      reject(response)
    })
  })
}
/**
 * 判断对象是否为空
 * */
function isNull(obj) {
  let arr = Object.keys(obj)
  let is = (arr.length == 0)
  return is
}
/**
 * 公开 使用方式直接以 this.postAxios/getAxios(url,params).then(res=>{}).catch(err=>{})
 * */
export default {
  install: function (Vue) {
    Vue.prototype.getAxios = (url, params) => apiAxios('GET', url, params);
    Vue.prototype.postAxios = (url, params) => apiAxios('POST', url, params);
    Vue.prototype.isNull = (obj) => isNull(obj)
  }
}

使用方式 post

this.postAxios('/api/orders/update',{data}).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})

使用方式 get

this.GetAxios('/api/orders/update',{data}).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})