我想要一个vue3得封装axios

好的，以下是一个基本的Vue 3封装Axios的示例：

import axios from 'axios';
import { reactive } from 'vue';

const instance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
});

const state = reactive({
  data: null,
  error: null,
  loading: false,
});

export default function useAxios() {
  async function fetchData(endpoint) {
    state.loading = true;
    try {
      const response = await instance.get(endpoint);
      state.data = response.data;
    } catch (error) {
      state.error = error;
    } finally {
      state.loading = false;
    }
  }

  return {
    fetchData,
    state,
  };
}

在这个例子中，我们首先导入Axios和Vue 3的`reactive`方法。然后，我们使用`axios.create`方法创建了一个新的Axios实例，并设置了基础URL。`state`对象包含了我们的数据、错误和加载状态，它们都是通过Vue 3的`reactive`函数创建的响应式对象。

最后，我们导出了一个自定义的`useAxios`函数，它包含了`fetchData`方法和`state`对象。`fetchData`方法接受一个`endpoint`参数，用于向服务器获取数据。在该方法内部，我们首先将`loading`状态设置为`true`，然后使用Axios实例发送GET请求。如果请求成功，我们将响应数据存储在`data`属性中。如果请求失败，我们将错误信息存储在`error`属性中。无论请求成功还是失败，我们都会将`loading`状态设置为`false`。

使用这个封装后的Axios，你可以在Vue 3组件中轻松地调用`fetchData`方法，然后根据`state`对象中的状态显示数据或错误信息。