VUE3：统一封装axios访问接口

已于 2025-05-05 22:15:11 修改
阅读量471 收藏 4
点赞数 14
文章标签： 状态模式
于 2025-05-05 22:08:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuukai/article/details/147723472
版权

一、代码整体结构

使用 export default 导出一个对象，该对象包含了多个方法，每个方法对应一个与后端交互的 API 请求操作。从功能划分来看，涵盖了用户管理、角色管理、菜单管理、API 管理、部门管理以及审计日志和客户管理等多个模块的常见操作，方便前端在不同业务场景下调用对应的后端接口。

使用方法：

二、举例

  1. 登录相关

    • login: (data) => request.post('/base/access_token', data, { noNeedToken: true })

      • 这是登录方法，使用 post 请求发送登录数据到 /base/access_token 接口。

      • 参数 data 是包含登录信息（如用户名、密码等）的对象。

      • { noNeedToken: true } 表示这个请求不需要携带 token，因为只有登录成功后才能获取到 token 用于后续请求的身份验证。

  2. 获取用户信息

    • getUserInfo: () => request.get('/base/userinfo')

      • 通过 get 请求获取当前登录用户的信息，调用的是 /base/userinfo 接口。

      • 这个方法没有参数，返回的是后端返回的用户详细信息数据，可用于在前端展示用户相关资料。

三、代码逻辑

统一的请求封装：这里所有的方法都基于 import { request } from '@/utils' 中导入的 request 对象来进行不同类型的 HTTP 请求操作，说明项目中对 Axios 请求进行了统一的封装。这样的封装有很多好处，比如可以在 request 封装中统一处理请求拦截（在请求发送前做一些操作，如添加通用的请求头、对请求数据进行预处理等）、响应拦截（对接收到的响应数据进行统一处理，如判断响应状态码是否正常、对返回数据进行格式化等），方便对整个项目的 HTTP 请求进行集中管理和维护，减少在每个请求方法中重复编写一些通用的请求逻辑代码，提高代码的复用性和可维护性。

四、完整代码分析

  1. 登录相关

    • login: (data) => request.post('/base/access_token', data, { noNeedToken: true })

      • 这是登录方法，使用 post 请求发送登录数据到 /base/access_token 接口。

      • 参数 data 是包含登录信息（如用户名、密码等）的对象。

      • { noNeedToken: true } 表示这个请求不需要携带 token，因为只有登录成功后才能获取到 token 用于后续请求的身份验证。

  2. 获取用户信息

    • getUserInfo: () => request.get('/base/userinfo')

      • 通过 get 请求获取当前登录用户的信息，调用的是 /base/userinfo 接口。

      • 这个方法没有参数，返回的是后端返回的用户详细信息数据，可用于在前端展示用户相关资料。

  3. 获取用户菜单

    • getUserMenu: () => request.get('/base/usermenu')

      • 同样是 get 请求，从 /base/usermenu 接口获取用户对应的菜单权限信息。

      • 用于根据用户权限动态渲染前端菜单，实现不同用户看到不同功能菜单的效果。

  4. 获取用户 API

    • getUserApi: () => request.get('/base/userapi')

      • 通过 get 请求从 /base/userapi 接口获取用户可访问的 API 信息。

      • 这在涉及到接口权限控制的系统中很有用，可以根据用户权限来决定前端能否调用某些接口。

  5. 修改密码

    • updatePassword: (data = {}) => request.post('/base/update_password', data)

      • 使用 post 请求向 /base/update_password 接口发送修改密码的数据。

      • 参数 data 用来包含旧密码和新密码等信息，前端收集用户输入的密码信息后通过这个方法发送给后端进行密码更新操作。

  6. 获取用户列表

    • getUserList: (params = {}) => request.get('/user/list', { params })

      • 通过 get 请求获取用户列表，调用的是 /user/list 接口。

      • 参数 params 可以包含分页信息（如页码、每页大小）、搜索条件（如用户名、邮箱等关键字）等，用于从后端分页、有条件地获取用户数据列表，方便在前端展示用户列表并支持分页和搜索功能。

  7. 根据 ID 获取用户信息

    • getUserById: (params = {}) => request.get('/user/get', { params })

      • 这是一个 get 请求，用于根据用户 ID 从 /user/get 接口获取特定用户的信息。

      • 参数 params 中会包含用户 ID 等关键信息，以便后端根据 ID 查找到对应用户并返回详细信息，可用于在编辑用户信息等场景下先获取当前用户的数据进行展示和修改。

  8. 创建用户

    • createUser: (data = {}) => request.post('/user/create', data)

      • 使用 post 请求向 /user/create 接口发送创建新用户的数据。

      • 参数 data 包含了新用户的各项信息，如用户名、密码、邮箱、角色等，前端在用户填写完创建用户表单后，通过这个方法将数据发送给后端进行用户创建操作。

  9. 更新用户

    • updateUser: (data = {}) => request.post('/user/update', data)

      • 也是 post 请求，用于向 /user/update 接口发送更新用户信息的数据。

      • 参数 data 包含需要更新的用户信息，如用户 ID（用于标识要更新的用户）、新的用户名、邮箱、角色等字段，实现对已存在用户信息的修改。

  10. 删除用户 * deleteUser: (params = {}) => request.delete(/user/delete, { params }) * 使用 delete 请求调用 /user/delete 接口来删除用户。

    • 参数 params 中包含要删除的用户 ID 等信息，后端根据这个 ID 执行删除对应用户的操作。

  11. 重置密码 * resetPassword: (data = {}) => request.post(/user/reset_password, data)

    • 通过 post 请求向 /user/reset_password 接口发送重置密码的数据。

    • 参数 data 可能包含用户 ID、新的默认密码等信息，用于帮助用户重置其密码，比如在忘记密码或者管理员重置用户密码的场景下使用。

  12. 获取角色列表 * getRoleList: (params = {}) => request.get('/role/list', { params })

    • 是 get 请求，用于从 /role/list 接口获取角色列表。

    • 参数 params 可以包含分页、搜索条件等，方便在前端展示角色列表并支持相应操作，和获取用户列表方法类似，只是操作对象变成了角色。

  13. 创建角色 * createRole: (data = {}) => request.post('/role/create', data)

    • post 请求向 /role/create 接口发送创建新角色的数据。

    • 参数 data 包括角色名称、描述、权限等信息，用于在系统中添加新的角色。

  14. 更新角色 * updateRole: (data = {}) => request.post('/role/update', data)

    • 也是 post 请求，向 /role/update 接口发送更新角色信息的数据。

    • 参数 data 包含角色 ID（标识要更新的角色）、新的角色名称、描述、权限等信息，实现对已有角色信息的修改。

  15. 删除角色 * deleteRole: (params = {}) => request.delete('/role/delete', { params })

    • 使用 delete 请求调用 /role/delete 接口删除角色。

    • 参数 params 里有要删除的角色 ID 等信息，后端据此执行删除操作。

  16. 更新角色授权 * updateRoleAuthorized: (data = {}) => request.post('/role/authorized', data)

    • 通过 post 请求向 /role/authorized 接口发送更新角色授权的数据。

    • 参数 data 包含角色 ID 以及对应的授权信息（比如可以访问哪些菜单、API 等），用于对角色的权限进行重新分配和设置。

  17. 获取角色授权信息 * getRoleAuthorized: (params = {}) => request.get('/role/authorized', { params })

    • 是 get 请求，从 /role/authorized 接口获取角色的授权信息。

    • 参数 params 中有角色 ID 等信息，返回该角色当前被授权的菜单、API 等详细权限内容，在展示角色权限或者进行权限调整时很有用。

  18. 获取菜单列表 * getMenus: (params = {}) => request.get('/menu/list', { params })

    • get 请求获取菜单列表，调用 /menu/list 接口。

    • 参数 params 可能包含分页、搜索条件等，用于在前端展示菜单列表并支持相应操作，方便对菜单进行管理。

  19. 创建菜单 * createMenu: (data = {}) => request.post('/menu/create', data)

    • 使用 post 请求向 /menu/create 接口发送创建新菜单的数据。

    • 参数 data 包括菜单名称、路径、父菜单 ID（如果有的话）、排序等信息，用于在系统中添加新的菜单项。

  20. 更新菜单 * updateMenu: (data = {}) => request.post('/menu/update', data)

    • post 请求向 /menu/update 接口发送更新菜单信息的数据。

    • 参数 data 包含菜单 ID（标识要更新的菜单）、新的菜单名称、路径、排序等信息，实现对已有菜单信息的修改。

  21. 删除菜单 * deleteMenu: (params = {}) => request.delete('/menu/delete', { params })

    • delete 请求调用 /menu/delete 接口删除菜单。

    • 参数 params 里包含要删除的菜单 ID 等信息，后端根据这个执行删除操作。

  22. 获取 API 列表 * getApis: (params = {}) => request.get('/api/list', { params })

    • get 请求获取 API 列表，调用 /api/list 接口。

    • 参数 params 可能包含分页、搜索条件（如 API 名称关键字等），在前端展示 API 列表并支持操作，便于对 API 进行管理。

  23. 创建 API * createApi: (data = {}) => request.post('/api/create', data)

    • 通过 post 请求向 /api/create 接口发送创建新 API 的数据。

    • 参数 data 包括 API 名称、路径、请求方法、描述等信息，用于在系统中添加新的 API 定义。

  24. 更新 API * updateApi: (data = {}) => request.post('/api/update', data)

    • post 请求向 /api/update 接口发送更新 API 信息的数据。

    • 参数 data 包含 API ID（标识要更新的 API）、新的 API 名称、路径、请求方法、描述等信息，实现对已有 API 信息的修改。

  25. 删除 API * deleteApi: (params = {}) => request.delete('/api/delete', { params })

    • 使用 delete 请求调用 /api/delete 接口删除 API。

    • 参数 params 中包含要删除的 API ID 等信息，后端据此执行删除操作。

  26. 刷新 API * refreshApi: (data = {}) => request.post('/api/refresh', data)

    • 通过 post 请求向 /api/refresh 接口发送数据来刷新 API。

    • 参数 data 可能包含一些和刷新操作相关的配置或者标识信息，用于在系统中更新 API 的某些状态或者重新加载 API 相关缓存等操作。

  27. 获取部门列表 * getDepts: (params = {}) => request.get('/dept/list', { params })

    • 是 get 请求，获取部门列表，调用 /dept/list 接口。

    • 参数 params 包含分页、搜索条件（如部门名称关键字等），用于在前端展示部门列表并支持分页、搜索等操作，方便对部门进行管理。

  28. 创建部门 * createDept: (data = {}) => request.post('/dept/create', data)

    • 使用 post 请求向 /dept/create 接口发送创建新部门的数据。

    • 参数 data 包括部门名称、上级部门 ID（如果有）、部门描述等信息，用于在系统中添加新的部门。

  29. 更新部门 * updateDept: (data = {}) => request.post('/dept/update', data)

    • post 请求向 /dept/update 接口发送更新部门信息的数据。

    • 参数 data 包含部门 ID（标识要更新的部门）、新的部门名称、上级部门 ID、描述等信息，实现对已有部门信息的修改。

  30. 删除部门 * deleteDept: (params = {}) => request.delete('/dept/delete', { params })

    • delete 请求调用 /dept/delete 接口删除部门。

    • 参数 params 里包含要删除的部门 ID 等信息，后端根据这个执行删除操作。

  31. 获取审计日志列表 * getAuditLogList: (params = {}) => request.get('/auditlog/list', { params })

    • 通过 get 请求获取审计日志列表，调用 /auditlog/list 接口。

    • 参数 params 可以包含分页、时间范围、操作类型等搜索条件，方便在前端展示审计日志并支持按条件查询，用于记录和查看系统的操作行为，便于后续的问题排查和安全审计等。

  32. 获取客户列表 * getCustomersList: (params = {}) => request.get('/production/customers/list', { params })

    • 是 get 请求，从 /production/customers/list 接口获取客户列表。

    • 参数 params 包含分页、搜索条件（如客户名称、联系方式等关键字），用于在前端展示客户列表并支持操作，方便对客户信息进行管理，适用于涉及客户相关业务的系统模块。

  33. 创建客户 * createCustomers: (data = {}) => request.post('/production/customers/create', data)

    • 使用 post 请求向 /production/customers/create 接口发送创建新客户的数据。

    • 参数 data 包含客户名称、联系方式、地址等信息，用于在系统中添加新的客户。

  34. 更新客户 * updateCustomers: (data = {}) => request.post('/production/customers/update', data)

    • post 请求向 /production/customers/update 接口发送更新客户信息的数据。

    • 参数 data 包含客户 ID（标识要更新的客户）、新的客户名称、联系方式、地址等信息，实现对已有客户信息的修改。

  35. 删除客户 * deleteCustomers: (params = {}) => request.delete('/production/customers/delete', { params })

    • 通过 delete 请求调用 /production/customers/delete 接口删除客户。

    • 参数 params 里包含要删除的客户 ID 等信息，后端据此执行删除操作。

  36. 获取客户信息 * getCustomers: (params = {}) => request.get('/production/customers/get', { params })

    • 是 get 请求，用于根据客户 ID 等条件从 /production/customers/get 接口获取特定客户的信息。

    • 参数 params 包含客户 ID 等关键信息，返回该客户的详细信息，可用于在编辑客户信息等场景下先获取当前客户的数据进行展示和修改。

徐福记c
关注
vue3：axios封装与使用
sunluyi的博客
03-16 6166
1、npm安装 cnpm install axios -S cnpm install qs -S 2、封装axios.js //router import router from "../router/index.js"; //引入路由对象 import { Toast } from 'vant'; // 提示框 // axios import axios from 'axios' import qs from "qs"; import { baseURL } from './common.j.
vue项目统一响应_在vue项目中：统一封装 Axios 接口与异常处理
weixin_33364925的博客
01-14 530
如图，面对一团糟代码的你~~~真的想说，What FUC~K！！！回归正题，我们所要的说的axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。一、axios的封装在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转...
在vue项目中：统一封装 Axios 接口与异常处理
qq_36396822的博客
07-19 6262
一、axios的封装 在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以我们的尤大大也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库。 安装 npm install axios; // 安装axios 引入 一般我会在项目的src目录中，新建一个request文件夹，然后在里面新
vue3实战-----二次封装axios和统一管理API接口
太阳与星辰的博客
02-13 669
vue3中二次封装axios和统一管理API接口
vue3+Ts封装axios网络请求
weixin_73098736的博客
06-28 650
在package.json中检查axios是否安装成功。
vue3框架中使用axios调用接口
meiyuan0369的博客
06-06 880
【代码】vue3框架中使用axios调用接口。
项目级的vue3封装axios请求接口要怎么做？
q1463944989的博客
12-08 1521
vue3封装axios 项目级的vue3封装axios功能
vue3+axios 封装拦截器
幽幽谷
09-06 451
vue3+axios 封装拦截器
Vue3 + Ts 封装axios
qq_35624605的博客
11-01 4998
封装思路 index.ts 我们需要在src的根目录下创建一个axios文件夹，其中创建一个index.ts文件，这个文件主要用来封装axios的配置（实例化请求配置、请求拦截器、相应拦截器）及相应的方法（登录跳转、消息提示、错误处理等） base.ts 这个文件主要用于项目扩展的情况下 不同模块需要调用不同接口（请求的base地址 baseURL ）而前期做的准备，便于后期的维护 request.ts 主要用于封装基于axios配置的get/post/put/delete等使用方法。 api.ts 在后面
Vue3-Axios二次封装与Api接口统一管理
小卡拉米的博客
01-20 1554
Vue3-Axios二次封装与Api接口统一管理
VUE3（十六）封装axios
camellia的博客
03-18 9485
一：axios 基础 从浏览器中创建XMLHttpRequest 从node.js发出http请求 支持Promise API 拦截请求和响应 转换请求和响应数据 取消请求 自动转换JSON数据 客户端支持防止CSRF/XSRF 二：axios封装 关于Axios的封装这部分涉及到与后端的一些约定。 什么约定呢？就是在我们请求接口的时候，后端会返回给我们一个code。 在我开发的时候，一般约定 code：-200为登录失效状态 code：-100为接口发生错误状态。（为了避免服务器端接口报错导致前端无法运行
vue.cli项目封装全局axios，封装请求，封装公共的api和调用请求的全过程
热门推荐
JCat的博客
09-03 10万+
vue项目的前期配置 封装axios实例 封装API
依赖注入详解与案例（前端篇）
最新发布
我是 二川兄，对Web开发、GIS开发、3D模型、机器学习、面试技巧等方面都有一些涉猎~ 欢迎您加入技术交流圈！你可以在我的文章末尾找到我~
05-06 886
通过合理使用依赖注入，前端开发者可以显著提升代码的灵活性、可维护性和可测试性，构建更健壮的应用架构。是一种通过外部容器管理组件/类间依赖关系的设计模式，其核心是。：适合跨层级组件共享依赖，避免层层传递props。提供完整的DI支持，是前端DI的典型实现。：在祖先组件中提供依赖，在后代组件中注入。等提供完整的DI容器支持。
Java实用注解篇： @JSONField
x²
05-06 726
JSONField注解是 Fastjson 提供的元注解，位于包中。它允许开发者在字段或方法上配置特定的序列化/反序列化规则，从而达到灵活控制 JSON 输出和输入的目的。@JSONField是 Fastjson 提供的一个功能强大的注解，它允许开发者更灵活地控制对象的 JSON 映射行为。通过合理配置其属性，可以实现字段重命名、日期格式转换、序列化控制等多种功能，在企业级开发中非常实用。如果你在项目中使用 Fastjson，掌握@JSONField的用法将大大提升你对 JSON 数据处理的掌控能力。
状态模式 VS 策略模式
u010130947的专栏
05-06 400
在软件开发的世界里，设计模式如同工匠手中的精良工具，能帮助开发者打造出结构清晰、易于维护和扩展的软件系统。状态模式和策略模式便是其中两个常用却容易让人混淆的设计模式。接下来，我们会详细剖析它们的区别、适用场景，并给出 Python 代码示例
本地大模型编程实战(32)用websocket显示大模型的流式输出
liupras的博客
05-02 1236
本文将模仿后端流式输出文字，前端一块一块的显示文字。主要的实现路径是： - `LLM` 采用 `qwen3` ，使用 `stream` 方式输出 - 后端使用 `langchain` 框架 - 使用 `fastapi` 实现后端接口 - 前后端之间使用 **`websocket`** 长连接通信 - 前端使用一个简单的 `html5` 网页做演示
xss-lab靶场基础详解第1~3关
m0_74741186的博客
05-02 866
input value=' ' onfocus='alert(xss)'> //这是错误的xss语句，因为xss没加双引号，但是我还是 用这个通关了，我加了双引号，但是按理来说，他将双引号实体化编码之后，应该不识别 双引号才对啊，看了答案才知道他有两个输出，就是说我输入了一个，他返回了两个，第一个是被实体化了，但是第二个没有被实体化，但是被双引号括起来的，就是当做文本处理了，这发现，他的闭合方式是单引号，而不是前端审查元素那个双引号！
状态模式（State Pattern）
qq_42889517的博客
05-05 910
✅。
盲盒源码_盲盒系统_盲盒定制开发 盲盒搭建前端教程
d93680025的博客
05-01 531
由此可见线上盲盒的市场规模消费群体以及消费群体的消费能力还是很大的，那么我们如何选择一家可靠正规的软件开发商和运营推广相信是很多想玩盲盒创业的群体所考虑的，下面我会给大家带来一些想法和如何搭建盲盒前端的教程。最近很多人问盲盒前端如何搭建 其实盲盒前端都是uniapp写，搭建起来并不麻烦，无非就是打包上传的过程，下面我以壹软某个系列盲盒系统演示一下！一.盲盒源码线上盲盒盲盒系统盲盒市场前景。三.盲盒源码盲盒系统搭建部署前端总结。二.盲盒源码盲盒系统搭建前端演示。四.下面分享一下盲盒前端源码。
vue3封装axios请求接口跨域
01-09
### 封装 Axios 并实现跨域请求 #### 创建 Axios 实例并设置默认配置 为了更好地管理和维护 HTTP 请求，在 `src/utils` 文件夹下创建名为 `http.ts` 的文件来封装 Axios。通过这种方式可以集中处理全局配置，如基础 URL 和拦截器。 ```typescript // src/utils/http.ts import axios, { AxiosInstance, AxiosRequestConfig } from &#39;axios&#39;; const service: AxiosInstance = axios.create({ baseURL: process.env.VUE_APP_BASE_API, timeout: 5000 // request timeout }); service.interceptors.request.use( (config: AxiosRequestConfig) => { const token = localStorage.getItem(&#39;token&#39;); if (token && config.headers) { config.headers[&#39;Authorization&#39;] = `Bearer ${token}`; } return config; }, error => Promise.reject(error) ); export default service; ``` 此部分代码定义了一个带有预设选项的新 Axios 实例，并设置了请求前缀路径以及超时时间[^1]。 #### 处理 API 接口管理 按照模块化思路设计API接口层结构，即在 `src/api` 下按功能划分不同子目录存放各自业务逻辑对应的接口函数。例如： ```plaintext ├── api/ │ ├── user.ts # 用户相关接口 │ └── product.ts # 商品相关接口 └── utils/ └── http.ts # Axios实例和服务端交互工具类 ``` 对于具体的接口调用，则可以在相应的 `.ts` 文件内编写如下所示的方法： ```typescript // src/api/user.ts import service from &#39;@/utils/http&#39;; export function getUserInfo(params?: any): Promise<any> { return service.get(&#39;/user/info&#39;, { params }); } ``` 上述例子展示了如何利用之前建立好的 Axios 实例发起 GET 类型的数据获取操作[^3]。 #### 配置 Vite 开发环境下的代理服务器以解决开发阶段的 CORS 错误 由于浏览器同源策略限制，默认情况下前端应用无法直接向不同的域名发送 AJAX 请求。为此可以通过修改构建工具（这里是Vite）的相关配置项来绕过这一障碍。编辑项目的根目录中的 `vite.config.ts` 或者 `vite.config.js` 添加代理规则: ```javascript // vite.config.ts or vite.config.js import { defineConfig } from &#39;vite&#39;; import vue from &#39;@vitejs/plugin-vue&#39;; export default defineConfig({ plugins: [vue()], server: { proxy: { &#39;/api&#39;: { target: &#39;https://example.com&#39;, changeOrigin: true, rewrite: path => path.replace(/^\/api/, &#39;&#39;) } } } }); ``` 这段配置使得当访问 `/api/*` 路径时会被转发到指定的目标地址上执行实际的服务端程序[^4]。 #### 生产环境中部署反向代理服务 除了开发期间借助本地代理外，在生产环境下通常还需要依靠 Nginx 等 Web Server 来完成正式上线后的跨域资源共享(CORS)支持工作。这涉及到调整后端应用程序的安全性和权限控制机制，确保只允许来自特定来源的应用能够成功读取资源数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值