vue3axios封装axios

在Vue 3中使用Axios进行网络请求的封装可以按照以下步骤进行： 1. 首先，在你的项目中安装Axios。你可以使用npm或者yarn进行安装： ```shell npm install axios ``` 或者 ```shell yarn add axios ``` 2. 创建一个`api.js`文件或者类似的命名文件，用于封装Axios请求。在该文件中，你可以定义各种请求方法，例如`get`、`post`、`put`、`delete`等。 ```javascript import axios from 'axios'; const api = axios.create({ baseURL: 'http://your-api-url.com', // 设置接口的基本地址 timeout: 5000, // 设置请求超时时间 headers: { 'Content-Type': 'application/json', // 设置请求头类型 }, }); export default { get(url, params) { return api.get(url, { params }); }, post(url, data) { return api.post(url, data); }, put(url, data) { return api.put(url, data); }, delete(url) { return api.delete(url); }, }; ``` 3. 在需要发送网络请求的Vue组件中导入封装好的`api.js`文件，并使用相关的请求方法发送请求。 ```javascript import api from './api.js'; export default { methods: { async fetchData() { try { const response = await api.get('/your-api-endpoint'); // 处理请求成功的响应数据 console.log(response.data); } catch (error) { // 处理请求失败的错误 console.error(error); } }, }, }; ``` 这样就完成了Vue 3中使用Axios进行网络请求的封装。你可以根据实际需求进一步扩展API封装，例如添加拦截器、处理请求错误等。

### Vue 3 中 Axios 封装的最佳实践 为了提高代码的复用性和可维护性，在 Vue 3 项目中可以按照以下方式封装 Axios： #### 创建 Axios 实例并配置基础选项 通过创建一个独立的 Axios 实例，可以在全局范围内统一管理请求的基础配置和拦截器逻辑。 ```javascript // utils/request.js import axios from 'axios'; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // API 基础路径可以从环境变量获取 timeout: 5000, // 请求超时时间 (毫秒) }); export default service; ``` 此部分定义了 Axios 的基本属性，例如 `baseURL` 和 `timeout`[^2]。 --- #### 添加请求拦截器 在请求发送之前可以通过拦截器对请求进行预处理，比如添加认证令牌或修改请求头。 ```javascript service.interceptors.request.use( config => { // 如果存在 token，则将其加入到请求头部 const token = localStorage.getItem('token'); if (token) { config.headers['Authorization'] = `Bearer ${token}`; } return config; }, error => { console.error(error); // 打印错误日志 Promise.reject(error); } ); ``` 这段代码展示了如何利用请求拦截器来动态注入 Token 到 HTTP 头部。 --- #### 添加响应拦截器 对于服务器返回的数据，也可以通过响应拦截器来进行集中化处理，例如解析状态码或者捕获异常情况。 ```javascript service.interceptors.response.use( response => { const res = response.data; // 自定义校验：如果接口返回的状态码不是 200 或其他预期值，则抛出错误 if (res.code !== 200) { Message.error(res.message || 'Error'); // 使用 Element Plus 提供的消息提示组件显示错误信息 return Promise.reject(new Error(res.message || 'Request failed')); } return res; }, error => { let message = ''; if (error && error.response) { switch (error.response.status) { case 401: message = 'Unauthorized'; break; case 403: message = 'Forbidden'; break; case 404: message = 'Not Found'; break; default: message = error.message || 'Unknown Error'; } } else { message = error.message || 'Network Error'; } Notification.error(message); // 显示通知消息 return Promise.reject(error); } ); ``` 这里实现了基于不同 HTTP 状态码的行为控制以及友好的用户体验反馈机制。 --- #### 定义通用请求方法 将封装后的 Axios 放入单独的服务文件夹下，并导出多个具体功能的方法以便调用方更方便地使用这些服务。 ```typescript // api/index.ts import service from '@/utils/request'; interface ILoginParams { username: string; password: string; } export function login(data: ILoginParams) { return service.post('/auth/login', data).then(response => response.result); } ``` 上述例子说明了如何针对特定业务场景设计简洁明了的 API 函数接口[^3]。 --- #### 解决跨域问题 当遇到前后端分离架构下的 CORS 跨源资源共享限制时，可通过 Node.js 配置代理解决开发阶段中的跨域难题。 ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://your-backend-server.com', changeOrigin: true, pathRewrite: { '^/api': '' }, }, }, }, }; ``` 这是关于如何调整 vue.config.js 文件以支持本地调试期间自动转发请求至远程主机上的解决方案[^4]。 --- #### 结合 Hook 进一步增强功能性 借助 React Hooks 思想模式，还可以构建自定义 Hook 来简化复杂逻辑操作流程。下面是一个简单的取消重复请求的例子： ```typescript function useAxiosWithCancel<T>(config: any): [Promise<T>, () => void] { const controller = new AbortController(); const cancelTokenSource = axios.CancelToken.source(); const request = async (): Promise<T> => { try { const result = await service({...config, cancelToken: cancelTokenSource.token}); return result as T; } catch (err) { throw err; } finally { controller.abort(); // 清理资源 } }; const cancelRequest = () => { cancelTokenSource.cancel('Operation canceled by the user.'); }; return [request(), cancelRequest]; } ``` 它允许开发者轻松实现中断未完成网络活动的功能特性[^1]。 ---