提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

一、axios 的二次封装

涉及到的文件

1. utils/request.sj
2. api/user/index.js
3. vite.config.js
   

二、步骤

1.安装

npm i axios 
npm install element-plus --save

---

2. request.js

utils 文件下的 request.js

对 axios 简单的二次封装，以下的配置，复制即可用，最简配置

代码如下（示例）：

import axios from "axios";
import { ElMessage } from "element-plus";

const request = axios.create({
  // 此处的 '/api' 和 vite.config.js 的配置相关联
  baseURL: '/api',
  timeout: 50000
});

// 数据请求拦截
request.interceptors.request.use((config) => {
  // 1. 返回config对象
  // 2. 可以设置携带 token 信息
  return config;
});


// 返回响应数据拦截
request.interceptors.response.use((response) => {
  console.log("request.js打印返回信息" , response);
  // 简化返回数据
  if (response.data.code === '200') {
    return Promise.resolve(response.data);
  }
}, 
// 错误执行
(error) => {
  console.log("错误信息", error);
  if (error.response.status) {
    switch (error.response.status) {
      case 404:
        ElMessage({
          type: 'error',
          message: '请求路径找不到！',
          showClose: true
        });
        break;

      case 500:
        ElMessage({
          type: 'error',
          message: '服务器内部报错！',
          showClose: true
        });
        break;

// 还可以自己添加其他状态码
      default:
        break;
    }
  }
  return Promise.reject(new Error(error.message));
});

// 暴露对象
export default request

---

3.index.js 请求设置

api 文件下的 index.js
代码如下（示例）：

import request from '@/utils/request.js'

const API = {
    // 所有角色信息
    ROLES_URL : '/roles',
    // 添加角色信息
    ADD_ROLE_URL : '/roles/addRole/',
    // 根据角色ID删除
    DELETE_ROLE_URL: '/roles/',
    // 批量删除
    DELETE_ROLE_LIST_URL: '/roles/deleteIds/',
    // 更改角色信息
    UPDATE_ROLE_URL: '/roles/updateRole/',
    // 角色分配菜单
    ROLE_ASSIGN_MENU : '/roles/roleAssignMen/'
}

// 请求所有的角色数据
export const reqRoleGetAll = () => request.get(API.ROLES_URL);

// 添加角色信息
export const reqAddRole = (data) => request.post(API.ADD_ROLE_URL, data);

// 更改角色信息
export const reqUpdateRole = (data) => request.post(API.UPDATE_ROLE_URL, data);

// 根据角色ID删除
export const reqDeleteRole = (id) => request.get(API.DELETE_ROLE_URL + id);

// 批量删除
export const reqDeleteRoleList = (ids) => request.post(API.DELETE_ROLE_LIST_URL , ids);

// 角色分配菜单
export const reqRoleAssignMenu = (data) => request.post(API.ROLE_ASSIGN_MENU, data);

---

这是我的后端接口

     private final IRoleService roleService;
    private RoleController(IRoleService roleService) {
        this.roleService = roleService;
    }

    // 1:
    @ApiOperation("添加角色接口")
    @PostMapping("addRole")
    public Result addRole(@RequestBody TBRoleVo roleVo) {
        RoleDO role = new RoleDO();
        BeanUtil.copyProperties(roleVo, role, true);
        return Result.success(roleService.save(role));
    }

    // 2:
    @ApiOperation("请求所有角色接口")
    @GetMapping
    public Result getAll() {
        return Result.success(roleService.list());
    }

    // 3:
    @ApiOperation("根据角色ID删除")
    @GetMapping("/{id}")
    public Result deleteById(@PathVariable Integer id) {
        return Result.success(roleService.removeById(id));
    }

    // 4:
    @ApiOperation("批量删除")
    @PostMapping("deleteIds")
    public Result deleteById(@RequestBody List<Integer> ids) {
        return Result.success(roleService.removeBatchByIds(ids));
    }


    // 5:
    @ApiOperation("更改角色信息")
    @PostMapping("updateRole")
    public Result updateUser(@RequestBody TBRoleVo roleVo) {
        RoleDO role = new RoleDO();
        BeanUtil.copyProperties(roleVo, role, true);
        return Result.success(roleService.updateById(role));
    }

    // 6:
    @ApiOperation("角色分配菜单")
    @PostMapping("roleAssignMenu")
    public Result roleAssignMenu(@RequestBody TBRoleMenuVO roleMenuVO) {
        return Result.success(roleService.roleAssignMenu(roleMenuVO));
    }

---

4. vite.config.js 配置

使用： 配置代理跨域及请求路径

Vite 官网参考： https://cn.vitejs.dev/config/server-options.html

图片的 ‘/api’ 对应 server 配置的 ‘/api’ 配置，发出请求时，会直接访问http://localhost:9191，其他的子路径在 api/user/index.js 里面进行配置

	
    server: {
    	// 配置前端服务地址和请求端口
        host: "0.0.0.0",
        port: 8080,
        // 是否开启 https
        https: false,

        // 设置反向代理，跨域
        proxy: {
			// 第一访问路径
            "/api": {
                // 后台地址
                target: "http://localhost:9191",
                changeOrigin: true,
                // 将'api' 转换为 '',
                // 若后台访问地址为 http://localhost:9191/api/users,可以删掉这一句配置，
                // 若为http://localhost:9191/users,可以添加
                rewrite: (path) => path.replace(/^\/api/, ""),
            },

            // 第二访问地址
            "/api1": {
                // 后台地址
                target: "http://139.155.144.32:9191",
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api1/, ""),
            },

            // 第三访问地址
            "/api2": {
                // 后台地址
                target: "http://localhost:9090",
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/api2/, ""),
            },

        },
    },

---

5、使用请求

关于路径 ’ @/api/user/index.js’ 前面的 ’ @ ’ 符号，不知道的博友要在vite.config.js 里面进行配置，没有配置是不生效的。不需要的可以不用配

vite.config.js 配置

---

组件使用

// 1. 引入api
import { ElMessage } from 'element-plus';
import { onMounted } from "vue"
// axios 请求
import {
    reqRoleGetAll,
    reqAddRole,
    reqDeleteRole,
    reqDeleteRoleList,
    reqUpdateRole,
    reqRoleAssignMenu,
} from "@/api/role";

onMounted(() => {
    roleLoad();
});

// 用户请求数据
async function roleLoad() {
    await reqRoleGetAll().then((res) => {
        if (res.code === "200") {
            tableData.value = res.data;
        } else {
            ElMessage.error("请求数据失败");
        }
    });
}

---

总结

方便全局管理 api 请求，不要到具体的组件或者方法。