三、工具模块封装(一)：封装axios模块

1.封装axios模块

1.1 封装背景

使用axios发起一个请求是比较简单的事情， 但是axios没有进行封装复用， 项目越来越大， 会引起越来越多的代码冗余， 让代码变得越来越难维护， 所以我们在这里先对axios进行二次封装，使项目中各个组件能够复用请求，让代码变得更容易维护.
1.2封装要点

统一url配置.
统一api请求.

request(请求) 拦截器， 例如：带上token等， 设置请求头，
response(响应) 拦截器.倒如：统一错误处理， 页面重定向等.
根据需要， 结合vue x做全局的loading动画， 或者错误处理.
将axios封装成Vue插件使用.
1.3文件结构
在src目录下， 新建一个http文件夹， 用来存放http交互api代码.文件结构如下：
config.js：axios默认配置，包含基础路径等信息.
axios.js：二次封装axios模块， 包含拦截器等信息。
api.js：请求接口汇总模块， 聚合所有模块API.
index.js：将axios封装成插件， 按插件方式引入.
modules：用户管理、菜单管理等子權块API.

1.4 代码说明

1.4.1 config.js

import { baseUrl } from '@/utils/global'

export default {
  method: 'get',
  // 基础url前缀
  baseUrl: baseUrl,
  // 请求头信息
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  },
  // 参数
  data: {},
  // 设置超时时间
  timeout: 10000,
  // 携带凭证
  withCredentials: true,
  // 返回数据类型
  responseType: 'json'
}

1.4.2 axios.js

axios拦截器， 可以进行请求拦截和响应拦截， 在发送请求和响应请求时执行一些操作。
(1) 这里导入类配置文件的信息(如baseURL、headers、withCredentials等设置) 到axios对象。
(2) 发送请求的时候获取token， 如果token不存在， 说明未登录， 就重定向到系统登录界面， 否则携带token继续发送请求.
(3) 如果有需要， 可以在这里通过response响应拦截器对返回结果进行统一处理后再返回。

import axios from 'axios';
import config from './config';
import Cookies from "js-cookie";
import router from '@/router'

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 = Cookies.get('token')
        // 发送请求时携带token
        if (token) {
          config.headers.token = token
        } else {
          // 重定向到登录页面
          router.push('/login')
        }
        return config
      },
      error => {
        // 请求发生错误时
        console.log('request:', error)
        // 判断请求超时
        if (error.code === 'ECONNABORTED' && error.message.indexOf('timeout') !== -1) {
          console.log('timeout请求超时')
        }
        // 需要重定向到错误页面
        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 => {
        return response.data
      },
      err => {
        if (err && err.response) {
          switch (err.response.status) {
            case 400:
              err.message = '请求错误'
              break
            case 401:
              err.message = '未授权，请登录'
              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:
              err.message = '网关超时'
              break
            case 505:
              err.message = 'HTTP版本不受支持'
              break
            default:
          }
        }
        console.error(err)
        return Promise.reject(err) // 返回接口返回的错误信息
      }
    )
    // 请求处理
    instance(options).then(res => {
      resolve(res)
      return false
    }).catch(error => {
      reject(error)
    })
  })
}

1.4.3 index.js

这里把axios注册为Vue插件使用， 井将api模块挂载在Vue原型的$api对象上。这样在能获取this引用的地方就可以通过“this.$api.子模块.方法”的方式调用API了。

// 导入所有接口
import api from './api'

const install = Vue => {
    if (install.installed)
        return;

    install.installed = true;

    Object.defineProperties(Vue.prototype, {
        // 注意，此处挂载在 Vue 原型的 $api 对象上
        $api: {
            get() {
                return api
            }
        }
    })
}

export default install

1.4.4 api.js

此模块是一个聚合模块，汇合modules目录下的所有子模块API。

/* 
 * 接口统一集成模块
 */
import * as login from './modules/login'
import * as user from './modules/user'
import * as dept from './modules/dept'
import * as role from './modules/role'
import * as menu from './modules/menu'
import * as dict from './modules/dict'
import * as config from './modules/config'
import * as log from './modules/log'
import * as loginlog from './modules/loginlog'


// 默认全部导出
export default {
    login,
    user,
    dept,
    role,
    menu,
    dict,
    config,
    log,
    loginlog
}

1.4.5.user.js

modules目录下的子模块太多，这里以用户管理模块为例：

import axios from '../axios'

/* 
 * 用户管理模块
 */

// 保存
export const save = (data) => {
    return axios({
        url: '/user/save',
        method: 'post',
        data
    })
}
// 删除
export const batchDelete = (data) => {
    return axios({
        url: '/user/delete',
        method: 'post',
        data
    })
}
// 分页查询
export const findPage = (data) => {
    return axios({
        url: '/user/findPage',
        method: 'post',
        data
    })
}
// 查找用户的菜单权限标识集合
export const findPermissions = (params) => {
    return axios({
        url: '/user/findPermissions',
        method: 'get',
        params
    })
}

1.4.6.global.js

上面的配置文件中引用了global.js,我们把一些全局的配置、常量和方法放置在此文件中。

/**
 * 全局常量、方法封装模块
 * 通过原型挂载到Vue属性
 * 通过 this.Global 调用
 */

 // 后台管理系统服务器地址
// export const baseUrl = 'http://139.196.87.48:8001'
export const baseUrl = 'http://localhost:8001'
 // 系统数据备份还原服务器地址
// export const backupBaseUrl = 'http://139.196.87.48:8002'
export const backupBaseUrl = 'http://localhost:8002'

export default {
    baseUrl,
    backupBaseUrl
}

1.4.7.main.js

修改main.js，导入API模块，并通过Vue.use(api) 语句进行使用注册， 这样就可以通过
“this.$api.子模块.方法”的方式来调用后台接口了。
引入global模块， 并通过Vue.prototype.global=global语句进行挂载， 这样就可以通过
this.global.xx来获取全局配置了。

import Vue from 'vue'
import App from './App'
import router from './router'
import api from './http'
import global from '@/utils/global'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)  // 引入Element
Vue.use(api)  // 引入API模块

Vue.prototype.global = global // 挂载全局配置模块

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

1.5 安装js-cookie

在上面的axios.js中，会用到Cookie获取token，所以需要把相关依赖安装一下：

yarn add js-cookie