如何在 vue 中封装 axios

目录结构：

// http.js
import axios from 'axios' 
import qs from 'qs' // 引入qs模块，用来序列化post类型的数据
import { Message } from 'element-ui'
import router from '../router'
import store from '../store/index'
// 根据环境切换 baseURL
axios.defaults.baseURL = process.env.BASE_URL
// 设置请求超时
axios.defaults.timeout = 10000
// post 默认请求头设置
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
// 请求拦截
axios.interceptors.request.use(
  config => {
    // 从 store 中获取 token 并添加到请求头，后台根据 token 判断你的登录情况
    const token = store.getters.userInfo.token
    token && (config.headers['Authorization'] = token)
    
    // 显示 loading
    store.dispatch('changeGlobalState', { loading: true })
    
    return config
  },
  error => {
    return Promise.reject(error)
  })
// 响应拦截
axios.interceptors.response.use(
  response => {
    // 隐藏 loading
    store.dispatch('changeGlobalState', { loading: false })
    
    return response
  },
  // 这里可以跟你们的后台开发人员协商好统一的错误状态码    
  // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
  error => {
    if (error.response.status) {
      switch (error.response.status) {
        // 401: 未登录
        // 未登录则跳转登录页面，并携带当前页面的路径
        // 在登录成功后返回当前页面，这一步需要在登录页操作。                
        case 401:
          Message({
            message: '请先登录',
            type: 'warning'
          })
          return router.replace({
            path: '/login',
            query: {
              redirect: router.currentRoute.fullPath
            }
          })
        // 403 token 过期
        // 登录过期对用户进行提示
        // 清除 vuex 中 token
        // 跳转登录页面                
        case 403:
          Message({
            message: '登录过期，请重新登录',
            type: 'warning'
          })
          store.commit('loginFail')
          // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 
          setTimeout(() => {
            router.replace({
              path: '/login',
              query: {
                redirect: router.currentRoute.fullPath
              }
            })
          }, 1000)
          return
        // 404请求不存在
        case 404:
          return message({
            message: '网络请求不存在',
            type: 'warning'
          })
        // 其他错误，直接抛出错误提示
        default:
          message({
            message: error.response.data.message,
            type: 'warning'
          })
      }
      return Promise.reject(error.response)
    }
  }    
})

在vuex 中的store 的index .js 中定义 changeGlobalState ：

import Vue from 'vue'
import Vuex from 'vuex'


Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    isLoading: false
  },
  mutations: {
    loading(state, a) {
      state.isLoading = a
    }
  },
  actions: {
    changeGlobalState({commit}, a) {
      commit('loading', a)
    }
  },
  modules: {
  }
})