vue3 + vite 进行axios请求封装及接口API的统一管理怎么写写个完美的案例

以下是一个完美的案例，展示了如何使用Vue 3和Vite进行axios请求封装以及接口API的统一管理：

1. 在项目的根目录下，创建一个api文件夹，用于存放接口相关文件。

2. 在api文件夹中创建一个index.js文件，用于统一管理接口。

// api/index.js

import axios from 'axios';

// 创建一个axios实例
const instance = axios.create({
  baseURL: 'https://api.example.com', // 根据实际情况修改
  timeout: 5000, // 请求超时时间
});

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么，例如添加token等
    return config;
  },
  (error) => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 对响应数据做些什么
    return response.data;
  },
  (error) => {
    // 对响应错误做些什么
    return Promise.reject(error);
  }
);

// 定义接口
const API = {
  getUsers: () => instance.get('/users'),
  getUser: (id) => instance.get(`/users/${id}`),
  createUser: (data) => instance.post('/users', data),
  updateUser: (id, data) => instance.put(`/users/${id}`, data),
  deleteUser: (id) => instance.delete(`/users/${id}`),
};

export default API;

3. 在组件中使用接口。

<template>
  <div>
    <button @click="fetchUsers">获取用户列表</button>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import API from '@/api';

export default {
  setup() {
    const users = ref([]);

    const fetchUsers = async () => {
      try {
        const response = await API.getUsers();
        users.value = response;
      } catch (error) {
        console.error(error);
      }
    };

    onMounted(fetchUsers);

    return {
      users,
      fetchUsers,
    };
  },
};
</script>

在上面的例子中，我们封装了一个API对象，其中定义了一些常用的接口方法，例如获取用户列表、获取单个用户、创建用户、更新用户和删除用户等。这些方法使用了之前创建的axios实例来发送请求，并且返回了处理后的响应数据。

在组件中，我们使用了Vue 3中的Composition API来定义了一个users响应式变量和一个fetchUsers方法。当组件被挂载时，会调用fetchUsers方法来获取用户列表，并将结果赋值给users变量。同时，我们还提供了一个按钮，点击按钮会再次调用fetchUsers方法来更新用户列表。

通过这种方式，我们可以方便地进行axios请求的封装和接口API的统一管理，使代码更加清晰和可维护