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

要进行axios请求封装并统一管理接口API，可以按照以下步骤进行：

安装依赖：在项目根目录下执行以下命令安装axios和vue-router依赖：

npm install axios vue-router

创建封装axios请求的文件：在src目录下创建一个api文件夹，然后在api文件夹下创建一个request.js文件，代码如下：

import axios from 'axios';

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL, // 接口的基础url
  timeout: 5000, // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 可在此处对请求进行一些处理，如添加token等
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    // 可在此处对响应进行一些处理，如判断响应状态码等
    return response.data;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default service;

创建统一管理接口API的文件：在api文件夹下创建一个api.js文件，代码如下：

import request from './request';

// 示例接口
export function getUserInfo(id) {
  return request({
    url: `/users/${id}`,
    method: 'get',
  });
}

// 添加其他接口...

在Vue组件中使用接口API：在需要使用接口的Vue组件中，可以通过import引入接口API文件，并调用接口方法进行请求，代码如下：

import { getUserInfo } from '@/api/api';

export default {
  data() {
    return {
      userInfo: null,
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    async getUserInfo() {
      try {
        const response = await getUserInfo(1); // 调用接口方法
        this.userInfo = response;
      } catch (error) {
        console.error(error);
      }
    },
  },
};

以上就是使用vue3 + vite进行axios请求封装及接口API的统一管理的案例。注意，这只是一个简单示例，实际项目中可能需要根据具体情况进行更多的封装和处理

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