VUE3axios封装多个实例

当需要封装多个axios实例时，可以使用Vue3的provide/inject功能来实现。

首先，在主入口文件（如main.js或main.ts）中，创建并导出一个axios实例：

import axios from 'axios';

const instance1 = axios.create({
  baseURL: 'http://api.example.com',
  // 其他配置...
});

const instance2 = axios.create({
  baseURL: 'http://api.another-example.com',
  // 其他配置...
});

export { instance1, instance2 };

然后，在Vue应用的根组件中，使用provide将这些实例提供给子组件：

import { createApp } from 'vue';
import App from './App.vue';
import { instance1, instance2 } from './main';

const app = createApp(App);

app.provide('axiosInstance1', instance1);
app.provide('axiosInstance2', instance2);

app.mount('#app');

接下来，在需要使用axios实例的子组件中，使用inject来获取对应的实例：

import { inject, ref } from 'vue';

export default {
  setup() {
    const axiosInstance1 = inject('axiosInstance1');
    const axiosInstance2 = inject('axiosInstance2');

    const fetchData = async () => {
      const response1 = await axiosInstance1.get('/endpoint1');
      const response2 = await axiosInstance2.get('/endpoint2');
      // 处理响应数据...
    };

    return {
      fetchData
    };
  }
};

通过provide/inject的方式，我们可以在子组件中获取到封装好的axios实例，并使用它们进行网络请求。这样就实现了VUE3中封装多个axios实例的需求。