【ruoyi-vue】axios的封装理解和基本使用

### RuoYi-Vue Plus 对接 RuoYi-APP 方法 #### 集成概述 为了实现 `RuoYi-Vue Plus` 与 `RuoYi-APP` 的无缝对接，需确保前后端分离架构下的接口调用顺畅。此过程涉及配置文件调整、API 路由设置以及状态管理工具 Pinia 或 Vuex 的适配。 #### 后端准备 在 `RuoYi-APP` 中，确保已开启 CORS 支持并正确配置 API 接口路径。通常情况下，这一步骤已经在默认配置中完成，但仍建议开发者检查服务器响应头中的 Access-Control-Allow-Origin 字段是否允许跨域请求[^4]。 #### 前端配置 对于基于 Vue3 构建的应用程序而言，在创建应用实例时引入必要的插件和服务是非常重要的。具体来说： ```javascript import { createApp } from 'vue' import App from './App.vue' import router from '@/router/index.js'; import pinia from '@/store/index.js'; const app = createApp(App); // 使用路由和状态管理库 app.use(router).use(pinia); // 挂载至 DOM 容器 app.mount('#app'); ``` 上述代码片段展示了如何初始化一个 Vue 应用，并注册全局使用的路由器组件和状态管理模式[^2]。 #### API 请求封装 考虑到安全性因素，推荐采用 Axios 这样的 HTTP 客户端来处理所有的网络通信需求。通过自定义拦截器可以轻松地向每次请求附加身份验证令牌或其他必要参数： ```javascript import axios from 'axios' // 创建一个新的 Axios 实例 const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 设置基础 URL 地址 timeout: 5000 // 设定超时时长 }) service.interceptors.request.use( config => { const token = localStorage.getItem('token') if (token) { config.headers['Authorization'] = `Bearer ${token}` } return config; }, error => Promise.reject(error) ) export default service; ``` 这段脚本实现了对所有发出请求的预处理逻辑，包括但不限于添加认证信息到头部字段中去[^1]。 #### 数据同步机制 当涉及到复杂的业务场景时，可能还需要考虑客户端与服务端之间的双向数据绑定问题。此时可以通过 WebSocket 技术建立持久连接，从而实现实时消息推送功能；或者利用 GraphQL 查询语言简化多条件筛选查询语句的设计难度[^5]。