axios 封装

要在前端使用 Axios 进行封装，可以创建一个 Axios 实例并配置拦截器来统一处理请求和响应。在 Vue 3 项目中，这个封装过程可以通过一个单独的 JavaScript 文件来完成。

1. 安装 Axios

首先，确保你的项目中安装了 Axios：

npm install axios

2. 创建 Axios 封装文件

在 src 目录下创建一个名为 axios.js 的文件：

// src/axios.js
import axios from 'axios';

// 创建 axios 实例
const instance = axios.create({
  baseURL: 'https://api.example.com', // 替换为你的 API 基础路径
  timeout: 10000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json'
  }
});

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

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    return response.data;
  },
  error => {
    // 对响应错误做点什么
    if (error.response) {
      // 服务器返回的错误状态码
      switch (error.response.status) {
        case 401:
          // 未授权，可以重定向到登录页面
          window.location.href = '/login';
          break;
        case 403:
          // 无权限访问
          alert('无权限访问');
          break;
        case 404:
          // 资源未找到
          alert('资源未找到');
          break;
        case 500:
          // 服务器错误
          alert('服务器错误');
          break;
        default:
          alert('未知错误');
      }
    }
    return Promise.reject(error);
  }
);

export default instance;

3. 使用封装的 Axios 实例

在需要使用 Axios 的地方引入并使用封装的 Axios 实例。例如，在一个 Vue 组件中：

<template>
  <div>
    <h1>API 数据</h1>
    <ul>
      <li v-for="item in data" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import axios from '../axios'; // 引入封装的 axios 实例

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

    const fetchData = async () => {
      try {
        const response = await axios.get('/items'); // 请求数据
        data.value = response;
      } catch (error) {
        console.error('请求错误:', error);
      }
    };

    onMounted(() => {
      fetchData();
    });

    return {
      data
    };
  }
};
</script>

<style scoped>
h1 {
  color: #333;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  background: #eee;
  margin: 5px 0;
  padding: 10px;
  border-radius: 5px;
}
</style>

总结

通过以上步骤，你可以在 Vue 3 项目中实现对 Axios 的封装，从而统一处理请求和响应，方便管理 API 调用。封装后的 Axios 实例可以在项目的任何地方进行引入和使用，极大地提高了代码的可维护性和可读性。