Vue2 配置 Axios

### 如何在 Vue2 项目中配置 Axios 在 Vue 2 项目中，Axios 是一种非常流行的 HTTP 请求库，用于发送网络请求并与后端 API 进行交互。为了方便在整个应用中使用 Axios，通常会在项目的 `main.js` 文件中对其进行全局配置。 以下是详细的配置方法和示例： #### 全局配置 Axios 实例 通过将 Axios 添加到 Vue 原型链上 (`Vue.prototype`)，可以在任何组件中直接访问它。以下是在 Vue 2 中配置 Axios 的具体实现方式： ```javascript // main.js import Vue from 'vue'; import axios from 'axios'; // 创建一个自定义的 Axios 实例 const instance = axios.create({ baseURL: 'https://api.example.com', // 设置基础 URL timeout: 10000, // 超时时间 (毫秒) headers: { // 自定义头部信息 'Content-Type': 'application/json' } }); // 将 Axios 实例挂载到 Vue 原型链上 Vue.prototype.$http = instance; new Vue({ render: h => h(App), }).$mount('#app'); ``` 此代码片段展示了如何创建一个 Axios 实例并将其绑定到 Vue 的原型链上[^1]。这样，在任意 Vue 组件中都可以通过 `this.$http` 访问该实例。 --- #### 使用 Axios 发送 GET 和 POST 请求 一旦完成了全局配置，就可以轻松地在组件中调用 Axios 方法来执行各种类型的 HTTP 请求。 ##### 示例：GET 请求 下面是一个简单的例子，展示如何在一个 Vue 组件中发起 GET 请求以获取数据列表： ```javascript export default { data() { return { tableData: [], total: 0, currentPage: 1, pageSize: 10 }; }, methods: { fetchData() { this.$http.get("/user/list", { params: { pageNum: this.currentPage, pageSize: this.pageSize } }).then(response => { console.log(response); this.tableData = response.data.list; this.total = response.data.total; }).catch(error => { console.error("Error fetching user list:", error); }); } }, mounted() { this.fetchData(); } }; ``` 这段代码演示了如何利用之前配置好的 `$http` 对象发出 GET 请求，并处理返回的数据[^4]。 --- ##### 示例：POST 请求 如果需要向服务器提交表单或其他数据，则可以使用 POST 请求。这里提供了一个基本的例子： ```javascript methods: { submitForm(formData) { this.$http.post('/submit-form', formData).then(response => { alert('成功提交!'); console.log(response); }).catch(error => { console.error('错误:', error.response ? error.response : error.message); }); } } ``` 以上代码说明了如何构建一个函数来发送 POST 请求并将结果反馈给用户。 --- #### 错误处理机制 对于常见的 HTTP 状态码（如 401 或者 500），可以通过拦截器统一管理这些异常情况。例如： ```javascript instance.interceptors.response.use( response => response, error => { if (error.response.status === 401) { window.location.href = '/login'; // 如果未授权跳转登录页 } else if (error.response.status === 500) { alert('服务器内部发生错误！'); } return Promise.reject(error); } ); ``` 这个部分实现了对不同状态码的集中化控制逻辑[^2]。 --- ### 总结 综上所述，通过上述步骤即可完成 Vue 2 项目中的 Axios 配置工作。不仅能够简化跨模块间的重复代码编写过程，还能增强程序可维护性和一致性。