在 Vue 中使用自定义类封装 axios 进行网络请求

以下是对这段代码在 Vue 2 和 Vue 3 中的分析，并结合示例进行说明。

一、Vue 2

1. 分析：

   • 在 Vue 2 中，通常使用axios进行网络请求，并且可以通过自定义的类来封装axios的使用，比如VAxios类。在构造函数中接收配置选项并初始化axios实例和设置拦截器的方式是一种常见的模式。
   • Vue 2 中组件的生命周期钩子比较明确，如created、mounted等，可以在这些钩子中使用网络请求相关的逻辑。

2. 示例：

假设我们有一个 Vue 2 的项目，并且已经安装了axios。我们创建一个VAxios类的实例并在组件中使用它进行网络请求。

首先创建VAxios类：

// VAxios.js
import axios from 'axios';

class VAxios {
  constructor(options) {
    this.options = options;
    this.axiosInstance = axios.create(options);
    this.setupInterceptors();
  }

  setupInterceptors() {
    // 设置请求拦截器和响应拦截器的逻辑
    this.axiosInstance.interceptors.request.use(
      config => {
        // 在请求发送前进行一些处理，例如添加请求头
        return config;
      },
      error => {
        return Promise.reject(error);
      }
    );

    this.axiosInstance.interceptors.response.use(
      response => {
        // 对响应数据进行处理
        return response;
      },
      error => {
        return Promise.reject(error);
      }
    );
  }
}

export default VAxios;

然后在 Vue 2 组件中使用：

<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <div>{{ data }}</div>
  </div>
</template>

<script>
import VAxios from './VAxios';

export default {
  data() {
    return {
      data: null
    };
  },
  methods: {
    fetchData() {
      const axiosInstance = new VAxios({ baseURL: 'https://api.example.com' });
      axiosInstance.axiosInstance.get('/data').then(response => {
        this.data = response.data;
      });
    }
  }
};
</script>

二、Vue 3

1. 分析：

   • Vue 3 中对setup函数的使用更加广泛，可以在setup函数中进行网络请求的逻辑处理。与 Vue 2 类似，可以使用自定义的类来封装axios的使用，并且构造函数的功能和拦截器的设置方式基本相同。
   • Vue 3 中组合式 API 的使用使得代码的组织更加灵活，可以更好地分离关注点。

2. 示例：

假设我们有一个 Vue 3 的项目，并且已经安装了axios。我们创建一个VAxios类的实例并在组件中使用它进行网络请求。

// VAxios.js
import axios from 'axios';

class VAxios {
  constructor(options) {
    this.options = options;
    this.axiosInstance = axios.create(options);
    this.setupInterceptors();
  }

  setupInterceptors() {
    // 设置请求拦截器和响应拦截器的逻辑
    this.axiosInstance.interceptors.request.use(
      config => {
        // 在请求发送前进行一些处理，例如添加请求头
        return config;
      },
      error => {
        return Promise.reject(error);
      }
    );

    this.axiosInstance.interceptors.response.use(
      response => {
        // 对响应数据进行处理
        return response;
      },
      error => {
        return Promise.reject(error);
      }
    );
  }
}

export default VAxios;

然后在 Vue 3 组件中使用：

<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <div>{{ data }}</div>
  </div>
</template>

<script>
import VAxios from './VAxios';
import { ref } from 'vue';

export default {
  setup() {
    const data = ref(null);
    const fetchData = () => {
      const axiosInstance = new VAxios({ baseURL: 'https://api.example.com' });
      axiosInstance.axiosInstance.get('/data').then(response => {
        data.value = response.data;
      });
    };
    return {
      data,
      fetchData
    };
  }
};
</script>

在上述示例中，我们创建了一个VAxios类来封装axios的使用，并在 Vue 2 和 Vue 3 的组件中分别展示了如何使用这个类进行网络请求。请注意，这只是一个简单的示例，实际应用中可以根据具体需求进行更多的配置和扩展。