面试题：在 Vue 项目中你有封装过 Axios 吗？如何封装的？

在 Vue 项目中封装 Axios 是一个常见的需求，目的是统一管理请求的配置、拦截器和错误处理，从而提高代码的可维护性和复用性。以下是一个典型的 Axios 封装实现，包括请求拦截、响应拦截、错误处理、以及 API 的统一管理。

1. 创建 Axios 实例

首先，创建一个独立的 Axios 实例，并配置全局的默认选项（如 baseURL、timeout 等）。

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

// 创建 Axios 实例
const instance = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL, // 从环境变量中读取 API 地址
  timeout: 10000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json', // 默认请求头
  },
});

export default instance;

2. 请求拦截器

在请求拦截器中，可以统一处理请求前的逻辑，例如添加 Token、修改请求头等。

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

3. 响应拦截器

在响应拦截器中，可以统一处理响应数据或错误。

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 对响应数据做些什么
    if (response.status === 200) {
      return response.data; // 返回实际数据
    } else {
      return Promise.reject(response);
    }
  },
  (error) => {
    // 对响应错误做些什么
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 处理未授权
          console.error('未授权，请重新登录');
          break;
        case 404:
          // 处理未找到
          console.error('请求的资源不存在');
          break;
        case 500:
          // 处理服务器错误
          console.error('服务器错误');
          break;
        default:
          console.error('请求失败', error.message);
      }
    } else {
      console.error('请求失败', error.message);
    }
    return Promise.reject(error);
  }
);

4. 封装通用请求方法

为了进一步简化请求调用，可以封装通用的 GET、POST、PUT、DELETE 等方法。

// 封装 GET 请求
export function get(url, params) {
  return instance.get(url, { params });
}

// 封装 POST 请求
export function post(url, data) {
  return instance.post(url, data);
}

// 封装 PUT 请求
export function put(url, data) {
  return instance.put(url, data);
}

// 封装 DELETE 请求
export function del(url) {
  return instance.delete(url);
}

5. 统一管理 API

将所有的 API 请求地址统一管理，方便维护和修改。

// src/api/index.js
import { get, post, put, del } from '@/utils/request';

// 用户相关 API
export const userApi = {
  login: (data) => post('/user/login', data), // 登录
  getUserInfo: () => get('/user/info'), // 获取用户信息
  updateUser: (data) => put('/user/update', data), // 更新用户信息
  deleteUser: (id) => del(`/user/delete/${id}`), // 删除用户
};

// 商品相关 API
export const productApi = {
  getProductList: (params) => get('/product/list', params), // 获取商品列表
  getProductDetail: (id) => get(`/product/detail/${id}`), // 获取商品详情
  createProduct: (data) => post('/product/create', data), // 创建商品
};

6. 在组件中使用

在 Vue 组件中，通过引入封装好的 API 方法发起请求。

<template>
  <div>
    <button @click="fetchUserInfo">获取用户信息</button>
  </div>
</template>

<script>
import { userApi } from '@/api';

export default {
  methods: {
    async fetchUserInfo() {
      try {
        const data = await userApi.getUserInfo();
        console.log('用户信息:', data);
      } catch (error) {
        console.error('获取用户信息失败:', error);
      }
    },
  },
};
</script>