vue2配置axios和封装api

### Vue2 中 Axios 的配置与 API 封装 #### 创建必要的文件结构 为了更好地管理和维护 HTTP 请求，在项目中通常会创建如下几个文件： - `api.js`：用于存放所有的接口列表。 - `http.js`：负责封装 Axios 实例，提供统一的请求处理逻辑[^1]。 - `config.js`：设置 Axios 默认参数和其他全局配置选项。 #### 配置 Axios 基础实例 (`http.js`) 在 `http.js` 文件内完成对 Axios 的基础配置工作，比如设定超时时间、默认的基础 URL 和拦截器等功能。这样做的好处是可以让整个应用中的所有网络请求都遵循相同的规则和标准。 ```javascript // http.js import axios from 'axios'; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 设置API前缀 timeout: 5000 // 超时时间 }); service.interceptors.request.use( config => { // 可在此处添加 token 或其他公共头部信息 return config; }, error => Promise.reject(error) ); export default service; ``` #### 定义通用请求方法 (`request.js`) 通过定义一系列常用的 HTTP 方法来简化实际开发过程中的调用流程。这些函数可以直接被各个业务模块所使用，从而减少重复代码量。 ```javascript // request.js import http from './http'; function fetch(url, options={}) { let {method='GET', data=null} = options; switch(method.toUpperCase()){ case "POST": return http.post(url, data); case "PUT": return http.put(url, data); case "DELETE": return http.delete(url, {data}); default: return http.get(url, {params:data}); } } export default fetch; ``` #### 组件内部调用封装好的 Axios (`MyComponent.vue`) 当需要在一个具体的页面或组件里发起网络请求时，只需要简单地引入之前做好的工具类即可轻松实现功能需求。这种方式不仅提高了代码可读性和复用率，同时也降低了耦合度。 ```html <!-- MyComponent.vue --> <template> <!-- 模板部分省略... --> </template> <script> import fetch from '@/utils/fetch'; // 引入自定义fetch函数 export default { mounted(){ this.fetchData(); }, methods:{ async fetchData(){ try{ const response = await fetch('/some-endpoint'); console.log(response.data); } catch(e){ console.error('Error fetching data:', e.message); } } } } </script> ```