SpringBoot + Spring Cloud +Vue 管理系统前端搭建（三、工具模块封装）

SpringBoot + Spring Cloud +Vue 管理系统前端搭建（三、工具模块封装）

此文转载乐字节
封装axios模块
 
背景   
   使用axios发起一个请求是比较简单的事情，但是axios没有进行封装复用，项目越来越大，会引起越来越多的冗余代码，让代码变的越来越难维护，所以我们对axios进行二次封装，使项目中各个组件能够复用请求，让代码变得更容易维护。

要点
       统一url配置。

       统一api请求

       request请求拦截

       response拦截器

       根据需求，结合vuex做全局的loading动画，或者错误处理

       将axios封装成vue插件使用

文件结构
在src目录下新建http文件夹，用来存放http交互api代码。

api.js、axios.js、config.js、index.js、modules目录

 

api.js
/* 
 * 接口统一集成模块
 */
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
}

axios.js
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)
    })
  })
}

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

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

modules
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

})

}

ps：需要自学视频关注B站：免费学习