axios配置封装

在项目中封装 Axios 配置是一种常见的做法，尤其适用于大型项目，它有助于提升代码的可维护性、减少重复逻辑，并且能够统一处理请求和响应流程。以下是具体的封装步骤和实现方式。 ### 1. 创建 Axios 实例并设置基础配置 可以通过创建一个独立的 Axios 实例来集中管理基础 URL、默认超时时间、请求头等通用配置。这样可以避免在每个组件中重复定义这些参数。 ```javascript // src/utils/http.js import axios from 'axios'; const service = axios.create({ baseURL: process.env.VUE_APP_API_URL, // 从环境变量中获取基础URL timeout: 5000, // 请求超时时间（单位：毫秒） headers: { 'Content-Type': 'application/json;charset=utf-8' } }); export default service; ``` ### 2. 添加请求拦截器和响应拦截器 通过拦截器可以在请求发送前或响应返回后执行一些统一的操作，例如添加认证信息、处理错误、显示加载动画等。 ```javascript // src/utils/http.js import axios from 'axios'; import { ElLoading } from 'element-plus'; // 引入 Element Plus 的 Loading 组件 import store from '@/store'; // 引入 Vuex store let loadingInstance; // 创建 Axios 实例 const service = axios.create({ baseURL: process.env.VUE_APP_API_URL, timeout: 5000, headers: { 'Content-Type': 'application/json;charset=utf-8' } }); // 请求拦截器 service.interceptors.request.use( config => { // 显示全局 loading 动画 loadingInstance = ElLoading.service({ fullscreen: true }); // 添加 token 到请求头 const token = store.getters.token; if (token) { config.headers['Authorization'] = `Bearer ${token}`; } return config; }, error => { // 关闭 loading 动画 if (loadingInstance) loadingInstance.close(); console.error('请求拦截器出错:', error); return Promise.reject(error); } ); // 响应拦截器 service.interceptors.response.use( response => { // 关闭 loading 动画 if (loadingInstance) loadingInstance.close(); // 对响应数据进行统一处理 const res = response.data; if (res.code !== 200) { // 处理业务错误 console.error('响应错误:', res.message); return Promise.reject(new Error(res.message || 'Error')); } else { return res; } }, error => { // 关闭 loading 动画 if (loadingInstance) loadingInstance.close(); // 统一处理网络错误或服务器错误 console.error('响应拦截器出错:', error.message); return Promise.reject(error); } ); export default service; ``` ### 3. 封装 API 接口调用 为了进一步简化调用过程，可以将所有接口统一封装到一个 API 文件中，使得组件中只需调用对应的方法即可发起请求。 ```javascript // src/api/user.js import http from '@/utils/http'; export function login(data) { return http({ url: '/user/login', method: 'post', data }); } export function getUserInfo() { return http({ url: '/user/info', method: 'get' }); } ``` 在组件中使用： ```vue <script> import { login } from '@/api/user'; export default { methods: { async handleLogin() { try { const response = await login({ username: 'admin', password: '123456' }); console.log('登录成功:', response); } catch (error) { console.error('登录失败:', error); } } } }; </script> ``` ### 4. 全局配置的优势 - **统一配置**：所有请求共享相同的配置项，如基础 URL、超时时间、请求头等。 - **统一错误处理**：可以在拦截器中集中处理错误，避免在每个组件中单独捕获异常。 - **请求/响应拦截**：可以在请求发出前自动添加 token 或其他信息，在响应返回后统一处理数据结构。 - **减少冗余代码**：无需在每个组件中重复引入 Axios 并手动配置请求参数。 通过上述方式对 Axios 进行封装，不仅可以提高项目的可维护性，还能增强代码的健壮性和一致性[^4]。 ---