说说你在项目中二次封装axios的思路？

### 封装 Axios 请求的方法和思路 #### 1. 安装 Axios 和配置环境 为了在项目中使用 Axios 进行 HTTP 请求，首先需要安装 Axios 及其相关依赖。对于较新的 npm 版本，建议指定 `--legacy-peer-deps` 参数来避免潜在的 peer dependency 警告。 ```bash npm install axios --save --legacy-peer-deps ``` 此命令确保了 Axios 库被正确引入到项目中并保存至 package.json 文件中的 dependencies 字段[^3]。 #### 2. 创建 Request 模块 创建一个新的 JavaScript 或 TypeScript 文件作为请求模块的基础结构，通常命名为 `request.js` 或者类似的名称。这个文件将会成为所有 API 请求的核心入口点。 #### 3. 初始化 Axios 实例 通过自定义设置初始化一个 Axios 实例，可以在此处设定基础 URL、超时时间以及其他全局默认选项： ```javascript import axios from 'axios'; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 设置统一的请求前缀 timeout: 5000 // 请求超时时间 (毫秒) }); ``` 这段代码展示了如何基于项目的环境变量动态调整 base URL，并设置了通用的请求超时限制[^1]。 #### 4. 添加拦截器处理请求与响应 利用 Axios 提供的 interceptors 功能，在发送请求之前以及接收服务器返回的数据之后执行特定逻辑。这有助于集中管理错误提示、身份验证令牌刷新等功能。 ```javascript // 请求拦截器 service.interceptors.request.use( config => { // 在发送请求之前做些什么 const token = localStorage.getItem('token'); if (token) { config.headers['Authorization'] = `Bearer ${token}`; } return config; }, error => Promise.reject(error)); // 响应拦截器 service.interceptors.response.use( response => response.data, error => { console.error(`Error occurred during request:`, error); return Promise.reject(error); }); ``` 上述片段说明了如何向每个发出的请求自动附加授权头信息，并且当遇到网络问题或其他异常情况时提供友好的反馈机制[^2]。 #### 5. 构建 GET/POST 方法接口 针对最常用的两种 HTTP 方法——GET 和 POST ——构建简洁易用的服务函数。这些函数不仅简化了调用过程，还允许传入额外参数如查询字符串或表单数据。 ```javascript export function fetch(url, params={}) { return service.get(url, {params}).then(res=>res); } export async function postForm(url, data={}, config={}) { let formData = new FormData(); Object.keys(data).forEach(key=>{ formData.append(key,data[key]); }); return await service.post(url,formData,{ headers:{'Content-Type':'multipart/form-data'}, ...config }).then(res=>res); } ``` 以上两个导出函数分别实现了获取资源列表（fetch）和支持多部分编码格式提交资料的功能（postForm），其中后者特别适用于上传图片等二进制内容的情形。 #### 6. 扩展其他 HTTP 方法 除了 GET 和 POST 外，还可以按照相同模式继续扩展 PUT、DELETE 等操作对应的辅助工具方法。每种方式的具体实现大同小异，主要是依据业务需求定制化设计输入输出形式及其内部流程控制。 ---