首页vue2 axios封装与使用

vue2 axios封装与使用

时间: 2024-09-28 20:01:17 浏览: 85

Vue2 中使用 Axios 进行 HTTP 请求是一种常见的做法，因为它可以方便地与 Vue 应用集成，并提供了一致的 API。首先，你需要安装 Axios 和 Axios 插件： ```bash npm install axios axios-vue2-plugin --save ``` 然后，在 Vue 实例的 `created` 或者 `mounted` 生命周期钩子里，安装并配置 Axios 插件： ```javascript import axios from 'axios'; import { AxiosInstance } from 'axios'; import axiosPlugin from 'axios-vue2-plugin'; // 创建 Axios 实例并注入到 Vue 实例上 const instance: AxiosInstance = axios.create({ baseURL: process.env.BASE_API, // 根据需求设置API基础地址 timeout: 5000, // 设置超时时间 headers: { 'Content-Type': 'application/json', }, }); instance.use(axiosPlugin); // 将 Axios 实例挂载到 Vue 的原型上 Vue.prototype.$http = instance; ``` 接下来，你可以在组件中通过 `$http` 对象发送请求： ```vue <template> <div> <button @click="fetchData">获取数据</button> <p v-if="data">{{ data }}</p> </div> </template> <script> export default { methods: { fetchData() { this.$http.get('your-endpoint') // 替换为你需要的API路径 .then(response => (this.data = response.data)) .catch(error => console.error(error)); }, }, }; </script> ``` 当你点击按钮时，就会发起 GET 请求，并将返回的数据赋值给 `data` 属性。

阅读全文