首页axios网络请求封装

axios网络请求封装

时间: 2025-02-23 07:25:13 浏览: 34

### 封装 Axios 实现网络请求的最佳实践 #### 创建 Axios 实例为了提高代码的可维护性和重用性，创建一个自定义配置的 Axios 实例是一个好的做法。通过这种方式，在项目中的任何地方都可以轻松地使用相同的配置来发送 HTTP 请求。 ```javascript // src/utils/request.js import axios from 'axios'; const service = axios.create({ baseURL: '/api', // 统一设置基础路径[^2] timeout: 5000, // 设置超时时间 }); ``` #### 添加请求拦截器在实际开发过程中，通常会在请求发出之前做一些处理工作，比如添加认证令牌、显示加载动画等操作。这可以通过配置请求拦截器实现。 ```javascript service.interceptors.request.use( config => { const token = localStorage.getItem('token'); if (token) { config.headers['Authorization'] = `Bearer ${token}`; } return config; }, error => Promise.reject(error) ); ``` #### 添加响应拦截器同样地，对于服务器返回的数据也可以做进一步加工，例如隐藏加载提示框、解析错误信息等逻辑可以放在响应拦截器里完成。 ```javascript service.interceptors.response.use( response => response.data, error => { Message.error(error.message || 'Network Error'); return Promise.reject(error); } ); ``` #### 导出服务实例供外部调用最后一步就是把构建好的 Axios 实例导出去给其他模块使用，从而达到全局共享的目的。 ```javascript export default service; // 使用示例 import request from '@/utils/request'; request.get('/user').then(res => console.log(res)); ``` 以上便是基于 Axios 的一次较为完整的封装过程[^3]，不仅简化了日常编码流程，还增强了应用程序的安全性和用户体验。

阅读全文