【vue高频面试题—场景篇】：在vue项目中是如何封装axios的，主要封装了些什么模块提供了哪些全局功能

本文链接：https://blog.youkuaiyun.com/gaotlantis/article/details/144691424

在 Vue 项目中，封装 axios 是一种常见的做法，用于统一管理 API 请求逻辑、配置全局拦截器和处理通用功能。这种封装不仅可以提高代码的复用性，还能便于管理和调试。

1. 为什么要封装 axios？

统一管理 HTTP 请求配置（如基础路径、超时时间）。
处理全局请求和响应逻辑（如错误提示、状态码处理）。
支持全局功能（如添加 Token、请求节流、防重复提交）。
提供模块化的 API 管理，便于维护。

2. Axios 封装的主要模块

通常会将 axios 封装成一个独立的工具模块，分为以下几部分：

2.1 基础配置

定义基础的 axios 实例，配置通用参数：

baseURL：设置基础请求地址。
timeout：设置超时时间。
请求头（headers）：如 Content-Type 或认证 Token。

// axios.js
import axios from "axios";

// 创建 axios 实例
const instance = axios.create({
  baseURL: process.env.VUE_APP_BASE_API || "https://api.example.com", // 基础路径
  timeout: 10000, // 请求超时时间
  headers: {
    "Content-Type": "application/json",
  },
});

export default instance;

2.2 请求和响应拦截器

在封装中添加 axios 的请求和响应拦截器，用于处理通用逻辑。

(1) 请求拦截器

在请求头中添加认证 Token。

对请求进行节流或防重复提交。

instance.interceptors.request.use(
  (config) => {
    // 添加 Token
    const token = localStorage.getItem("token");
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    // 防止重复提交或请求节流（可选实现）
    config.headers["X-Request-Id"] = new Date().getTime(); // 示例唯一标识
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

(2) 响应拦截器

统一处理错误消息（如网络错误、状态码错误）。

提取实际的响应数据，简化业务代码。

instance.interceptors.response.use(
  (response) => {
    // 提取响应数据
    if (response.data.code === 200) {
      return response.data.data;
    } else {
      return Promise.reject(response.data.message || "未知错误");
    }
  },
  (error) => {
    // 处理网络或其他错误
    if (error.response) {
      switch (error.response.status) {
        case 401:
          alert("未授权，请重新登录");
          break;
        case 403:
          alert("禁止访问");
          break;
        case 500:
          alert("服务器错误");
          break;
        default:
          alert(error.response.statusText);
      }
    } else {
      alert("网络异常，请稍后再试");
    }
    return Promise.reject(error);
  }
);

2.3 模块化 API 管理

为避免在组件中直接调用 axios，通常会将 API 分模块管理，每个模块对应一组相关接口。

在项目中集中管理所有模块的 API：

javascript
复制代码
// api/index.js
import * as userAPI from "./user";
import * as productAPI from "./product";

export default {
  user: userAPI,
  product: productAPI,
};

3. 提供的全局功能

通过封装，可以提供以下全局功能：

3.1 基础功能

统一的错误提示：通过拦截器全局处理错误，避免重复实现。
Token 自动携带：拦截器中从本地存储或 Vuex 自动添加认证信息。

3.2 请求功能增强

请求防抖或节流：避免重复请求，如表单重复提交。
动态配置请求参数：如根据不同环境设置 baseURL。

3.3 响应功能增强

状态码处理：根据状态码自动执行操作（如跳转登录页、弹出错误提示）。
数据解包：直接返回所需的数据，减少业务代码的复杂度。

3.4 Mock 支持

在开发环境中集成 Mock.js 模拟 API 返回，提升开发效率。

4. 示例：Vue 项目中的使用

在 Vue 项目中，通过全局引入封装好的 API 模块并在组件中调用：

// main.js
import Vue from "vue";
import api from "@/api"; // 引入封装的 API

Vue.prototype.$api = api; // 挂载到 Vue 实例

在组件中调用接口：

// 示例组件
export default {
  name: "UserProfile",
  async created() {
    try {
      const userInfo = await this.$api.user.getUserInfo(this.userId);
      console.log("用户信息:", userInfo);
    } catch (error) {
      console.error("获取用户信息失败:", error);
    }
  },
};