vue2 axios封装与使用

Vue2 中使用 Axios 进行 HTTP 请求是一种常见的做法，因为它可以方便地与 Vue 应用集成，并提供了一致的 API。首先，你需要安装 Axios 和 Axios 插件：

npm install axios axios-vue2-plugin --save

然后，在 Vue 实例的 `created` 或者 `mounted` 生命周期钩子里，安装并配置 Axios 插件：

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` 对象发送请求：

<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` 属性。