【vue2.7.16系列】手把手教你搭建后台系统__封装工具库（4）

封装 axios 模块

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

封装要点

• 统一 url 配置
• 统一 api 请求
• request (请求) 拦截器，例如：带上token等，设置请求头
• response (响应) 拦截器，例如：统一错误处理，页面重定向等
• 根据需要，结合 Vuex 做全局的 loading 动画，或者错误处理
  将 axios 封装成 Vue 插件使用

在 src 目录下，新建一个 utils 文件夹，用来存放 工具库 代码。

在utils目录下，新建request.js文件用来封装axios

// 导入axios库
import axios from 'axios';

// 创建一个新的axios实例
const instance = axios.create({
  // 设置默认的基础URL
  baseURL: 'https://api.example.com',
  timeout: 5000,
});

// 拦截请求
instance.interceptors.request.use(
  // 在发送请求之前做些什么，例如添加token到请求头中
  config => {
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
    return config;
  },
  // 对请求错误做些什么
  error => {
    return Promise.reject(error);
  }
);

// 拦截响应
instance.interceptors.response.use(
  // 对响应数据做点什么
  response => {
    return response;
  },
  // 对响应错误做点什么
  error => {
    if (error.response.status === 401) {
      // 例如，如果响应状态码为401，跳转到登录页面
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

// 导出封装后的axios实例
export default instance;

准备数据

在 src 目录下，新建一个 api 文件夹，用来管理接口。

数据库建表

--
-- 表的结构 `xk_system_admin`
--

CREATE TABLE IF NOT EXISTS `xk_system_admin` (
  `id` smallint(5) unsigned NOT NULL AUTO_INCREMENT COMMENT '后台管理员表ID',
  `account` varchar(32) NOT NULL COMMENT '后台管理员账号',
  `head_pic` varchar(255) NOT NULL DEFAULT '',
  `pwd` char(100) NOT NULL COMMENT '后台管理员密码',
  `real_name` varchar(16) NOT NULL COMMENT '后台管理员姓名',
  `roles` varchar(128) NOT NULL COMMENT '后台管理员权限(menus_id)',
  `last_ip` varchar(16) DEFAULT NULL COMMENT '后台管理员最后一次登录ip',
  `last_time` int(10) unsigned DEFAULT NULL COMMENT '后台管理员最后一次登录时间',
  `add_time` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '后台管理员添加时间',
  `login_count` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '登录次数',
  `level` tinyint(3) unsigned NOT NULL DEFAULT '1' COMMENT '后台管理员级别',
  `status` tinyint(1) unsigned NOT NULL DEFAULT '1' COMMENT '后台管理员状态 1有效0无效',
  `is_del` tinyint(1) unsigned NOT NULL DEFAULT '0',
  PRIMARY KEY (`id`) USING BTREE,
  KEY `account` (`account`) USING BTREE,
  KEY `status` (`status`) USING BTREE
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COMMENT='后台管理员表' AUTO_INCREMENT=2;

--
-- 转存表中的数据 `xk_system_admin`
--

INSERT INTO `xk_system_admin` (`id`, `account`, `pwd`, `real_name`, `roles`, `last_ip`, `last_time`, `add_time`, `login_count`, `level`, `status`, `is_del`) VALUES
(1, 'admin', '123456', 'admin', '1', '127.0.0.1', 0, 0, 0, 0, 1, 0);

在api目录下，新建systemAdmin.js进行接口管理

创建好数据表后，后台写好接口

import request from '@/utils/request'

/**
 * @description 列表
 * @param {Object} param data {Object} 传值参数
 */
export function adminListApi (data) {
    return request({
        url: '/system/admin',
        method: 'get',
        params: data
    })
};

/**
 * @description 添加管理员提交接口
 * @param {Object} param data {Object} 传值参数
 */
export function addAdminApi (data) {
    return request({
        url: data.url,
        method: data.method,
        params: data.datas
    })
};

/**
 * @description 管理员删除
 * @param {Number} param id {Number} 管理员id
 */
export function delAdminApi (id) {
    return request({
        url: `/system/admin/${id}`,
        method: 'PUT'
    })
};


/**
 * @description 管理员表单渲染
 */
export function adminFromApi () {
    return request({
        url: '/system/admin/create',
        method: 'get'
    })
};


/**
 * @description 管理员编辑表单 生成规则
 * @param {Number} param id {Number} 管理员id
 */
export function adminEditFromApi (id) {
    return request({
        url: `/system/admin/${id}/edit`,
        method: 'get'
    })
};

/**
 * @description 管理员删除
 * @param {Number} param id {Number} 管理员id
 */
export function delAdminApi (id) {
    return request({
        url: `/system/admin/${id}`,
        method: 'DELETE'
    })
};

/**
 * @description 管理员 修改状态
 * @param {Object} param data {Object} 传值
 */
export function setShowApi (data) {
    return request({
        url: `system/set_status/${data.id}/${data.status}`,
        method: 'PUT'
    })
};

处理接口响应及异常捕获

接口响应数据处理及异常处理。

// 导入axios库
import axios from 'axios';
// 引入element-ui的message组件
import {Message, MessageBox} from 'element-ui';
// 引入路由router
import router from '@/router';

// 创建一个新的axios实例
const instance = axios.create({
  // 设置默认的基础URL
  baseURL: 'https://api.example.com',
  timeout: 5000,
});

// 拦截请求
instance.interceptors.request.use(
  // 在发送请求之前做些什么，例如添加token到请求头中
  config => {
    config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
    return config;
  },
  // 对请求错误做些什么
  error => {
    return Promise.reject(error);
  }
);

// 拦截响应
instance.interceptors.response.use(
  // 对响应数据做点什么
  response => {
    let status = response.data ? response.data.status : 0
    const code = status;
    switch (code) {
      case 200:
        return response.data
      case 400:
        return Promise.reject(response.data || {msg: '未知错误'})
      case 400011:
      case 400012:
        Message({
          message: response.data.msg,
          type: 'error',
          duration: 5 * 1000
        })
        return Promise.reject(response.data || {msg: '未知错误'})
      case 410000:
      case 410001:
      case 410002:
        console.log('token 问题');
        MessageBox.confirm('当前页面已失效，请重新登录！', 'Confirm logout', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          router.push('/login')
        })
        break
      default:
        alert('未知错误码');
        break
    }
    return response;
  },
  // 对响应错误做点什么
  error => {
    if (error.response.status === 401) {
      // 例如，如果响应状态码为401，跳转到登录页面
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

// 导出封装后的axios实例
export default instance;

先这样，有问题在调整。

参考

axios官方手册