vue项目 封装axios

### Vue.js 项目中 Axios 的封装示例 #### 创建 Axios 实例并设置默认参数 为了提高代码的可维护性和灵活性，在 `src/utils` 文件夹下创建一个新的 JavaScript 文件命名为 `http.js` 或者 `axiosInstance.js`。 ```javascript // src/utils/axiosInstance.js import axios from 'axios'; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // 设置基础url，可以在 .env 文件里定义环境变量 timeout: 5000 // 请求超时时间 }); export default service; ``` 此部分配置了 Axios 的实例，并设置了全局的基础 URL 和请求超时的时间[^1]。 #### 添加请求拦截器和响应拦截器 继续在同一文件内添加请求与响应拦截器来处理通用逻辑： ```javascript service.interceptors.request.use( config => { // 在发送请求之前做些什么 return config; }, error => { // 对请求错误做些什么 return Promise.reject(error); } ); service.interceptors.response.use( response => { const res = response.data; // 如果返回的状态码不是2xx，则认为是有错的 if (res.code !== 200) { Message({ message: res.message || 'Error', type: 'error', duration: 5 * 1000 }); return Promise.reject(new Error(res.message || 'Error')); } else { return res; } }, error => { // 对响应错误做点什么 return Promise.reject(error); } ); ``` 这段代码实现了对所有发出请求前后的统一处理机制，比如可以在此处加入 token 验证等功能[^3]。 #### 定义 API 接口函数 接下来在 `src/api` 下建立相应的模块化接口调用方法。例如对于用户认证功能来说，可在该路径下新增名为 `auth.js` 的文件用于管理登录注册等相关操作。 ```javascript // src/api/auth.js import request from '@/utils/axiosInstance'; export function login(data) { return request({ url: '/login', method: 'post', data }) } ``` 这里通过引入前面创建好的 Axios 实例来进行具体的 HTTP 调用，并将其导出以便其他组件能够方便地使用这些预设的方法[^4]。 #### 注册到 Vue 原型链上或作为插件提供给整个应用访问 最后一步是在项目的入口文件 `main.js` 中完成初始化工作，使得任何地方都可以轻松获取上述自定义的服务对象。 ```javascript // main.js import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; import store from './store'; import http from './utils/axiosInstance'; const app = createApp(App).use(store).use(router); app.config.globalProperties.$http = http; new app.mount('#app'); ``` 这样做的好处是可以让所有的子组件都能够直接通过 this 来获得 `$http` 属性从而发起网络请求而无需重复导入相同的依赖项[^2]。