vue3 + vite 进行axios请求封装及接口API的统一管理

前言

        在Vue 3项目中使用Vite进行开发时，对axios进行请求封装以及统一管理接口API是非常常见的做法。这不仅可以提高代码的复用性和可维护性，还能统一处理请求和响应，管理错误处理逻辑等。下面是一个详细的步骤和示例代码，来说明如何在Vue 3项目中使用Vite对axios进行请求封装及接口API的统一管理。

1. 项目初始化和安装依赖

首先，确保你已经创建了一个Vue 3项目并安装了Vite。可以使用以下命令进行项目初始化：

npm init vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install

接下来，安装axios： 

npm install axios

2. 创建axios实例

在项目中创建一个src/utils/request.js文件，用于创建axios实例，并进行基本的配置。

// src/utils/request.js

import axios from 'axios';

// 创建axios实例
const service = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL || 'https://api.example.com', // 设置请求的基地址
  timeout: 5000, // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    // 例如：添加token到header中
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response.data;
  },
  error => {
    // 对响应错误做些什么
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 处理未授权的错误
          console.error('未授权，请重新登录');
          break;
        case 404:
          // 处理资源不存在的错误
          console.error('请求的资源不存在');
          break;
        default:
          console.error('请求失败，请稍后再试');
      }
    } else if (error.request) {
      console.error('请求失败，请检查网络连接');
    } else {
      console.error('请求配置错误');
    }
    return Promise.reject(error);
  }
);

export default service;

3. 统一管理API接口

在src/api目录下创建文件来管理API接口。例如，可以创建一个src/api/user.js文件来管理与用户相关的接口。

 src/api/user.js

import request from '@/utils/request';

// 获取用户信息
export function getUserInfo(userId) {
  return request({
    url: `/users/${userId}`,
    method: 'get',
  });
}

// 更新用户信息
export function updateUserInfo(userId, data) {
  return request({
    url: `/users/${userId}`,
    method: 'put',
    data,
  });
}

// 删除用户
export function deleteUser(userId) {
  return request({
    url: `/users/${userId}`,
    method: 'delete',
  });
}

4. 在组件中使用API

在Vue组件中引入并使用这些API。例如，在src/components/UserProfile.vue组件中使用用户信息API。

<template>
  <div>
    <h2>用户信息</h2>
    <div v-if="userInfo">
      <p>用户名: {{ userInfo.username }}</p>
      <p>邮箱: {{ userInfo.email }}</p>
    </div>
    <div v-else>
      <p>加载中...</p>
    </div>
    <button @click="fetchUserInfo">获取用户信息</button>
    <button @click="updateUserInfo">更新用户信息</button>
    <button @click="deleteUser">删除用户</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { getUserInfo, updateUserInfo, deleteUser } from '@/api/user';

const userId = '123'; // 假设用户ID为123
const userInfo = ref(null);

const fetchUserInfo = async () => {
  try {
    const info = await getUserInfo(userId);
    userInfo.value = info;
  } catch (error) {
    console.error('获取用户信息失败', error);
  }
};

const updateUserInfo = async () => {
  try {
    const updatedInfo = {
      username: 'newUsername',
      email: 'newEmail@example.com',
    };
    await updateUserInfo(userId, updatedInfo);
    fetchUserInfo(); // 重新获取更新后的用户信息
  } catch (error) {
    console.error('更新用户信息失败', error);
  }
};

const deleteUser = async () => {
  try {
    await deleteUser(userId);
    userInfo.value = null; // 清空用户信息
    console.log('用户删除成功');
  } catch (error) {
    console.error('删除用户失败', error);
  }
};
</script>

<style scoped>
/* 样式代码 */
</style>

5. 总结

通过以上步骤，我们成功地在Vue 3项目中使用Vite对axios进行了请求封装，并统一管理了接口API。这种做法不仅提高了代码的可维护性和复用性，还能统一处理请求和响应，管理错误处理逻辑，使得项目结构更加清晰和易于扩展。希望这些代码和步骤能够帮助你在实际项目中更好地进行axios请求的封装和接口API的管理。