vue2二次封装axios请求

### Vue2 中二次封装 Axios 请求 #### 安装 Axios 库 为了能够在 Vue2 项目中使用 Axios 发起 HTTP 请求，需先安装 Axios。可以通过 npm 或 yarn 来完成这一操作。 ```bash npm install axios --save ``` 或者 ```bash yarn add axios ``` 此过程确保了项目的依赖项包含了 Axios[^1]。 #### 创建 Axios 封装模块 `http.js` 接下来，在项目根目录下创建一个新的 JavaScript 文件命名为 `http.js`，该文件负责定义全局使用的 Axios 实例以及一些默认配置： ```javascript // src/utils/http.js import axios from 'axios'; const service = axios.create({ baseURL: process.env.VUE_APP_BASE_API, // API base_url timeout: 5000 // 请求超时时间 }); // Request 拦截器 service.interceptors.request.use( config => { // 在发送请求之前做些什么 return config; }, error => { // 对请求错误做些什么 return Promise.reject(error); } ); // Response 拦截器 service.interceptors.response.use( response => { const res = response.data; // 如果返回的状态码不是 200，则认为是有错的 if (res.code !== 200) { Message({ message: res.message || "Error", type: "error" }); return Promise.reject(new Error(res.message || "Error")); } else { return res; } }, error => { console.log('err' + error); // 输出到控制台方便调试 Message({ message: error.message, type: "error" }); return Promise.reject(error); } ); export default service; ``` 这段代码实现了对 Axios 的基本封装，并设置了请求和响应拦截器以便处理通用逻辑。 #### 使用封装后的 Axios 进行数据获取 当以上准备工作完成后，可以在任何 Vue 组件内轻松调用这个自定义的服务来进行 GET/POST 等类型的网络请求。下面是一个简单的例子展示如何在一个组件里利用刚才建立起来的服务发出 POST 请求并接收服务器端传回的数据。 ```javascript <template> <div>{{ data }}</div> </template> <script> import http from '@/utils/http'; export default { name: 'ExampleComponent', data() { return {data: null}; }, methods: { fetchData() { http.post('/api/example', {}) .then(response => this.data = response) .catch(err => console.error(err)); } }, mounted(){ this.fetchData(); } } </script> ``` 在此基础上还可以进一步扩展功能，比如加入 token 认证机制、统一管理 loading 效果等特性来满足实际开发需求[^2]。