Vue项目中Axios全面封装实战指南

引言

在现代前端开发中，HTTP请求是应用与后端交互的核心环节。Axios作为目前最流行的HTTP客户端库，以其简洁的API和强大的功能受到广泛青睐。然而，直接在项目中裸用Axios会导致代码冗余、维护困难等问题。本文将深入探讨如何在Vue项目中全面封装Axios，打造企业级的HTTP请求解决方案。

一、为什么需要封装Axios？

1.1 直接使用Axios的问题

• 代码重复：每个请求都需要写完整的配置

• 维护困难：基础配置分散在各个文件中

• 缺乏统一错误处理

• 难以实现请求拦截和响应拦截的统一管理

• 类型安全缺失（TypeScript项目）

1.2 封装带来的优势

• 统一配置和管理

• 提高代码复用性

• 增强错误处理能力

• 便于实现请求拦截、身份验证等功能

• 提升开发效率和代码质量

二、基础封装实现

2.1 项目结构规划

src/
├── api/
│   ├── index.ts          # 导出所有API
│   ├── request.ts        # Axios封装核心
│   ├── types/           # 类型定义
│   │   ├── request.ts
│   │   └── response.ts
│   ├── modules/         # 模块化API
│   │   ├── user.ts
│   │   └── product.ts
│   └── interceptors/    # 拦截器
│       ├── request.ts
│       └── response.ts

2.2 创建基础请求类

// src/api/request.ts
import axios, {
  AxiosInstance,
  AxiosRequestConfig,
  AxiosResponse,
  InternalAxiosRequestConfig
} from 'axios';
import { RequestConfig, RequestInterceptors, CancelRequestSource } from './types';

class Request {
  // axios实例
  instance: AxiosInstance;
  // 拦截器对象
  interceptorsObj?: RequestInterceptors;
  // 存储取消请求的Map
  cancelRequestSource: CancelRequestSource;
  // 存储所有请求url
  requests: string[];

  constructor(config: RequestConfig) {
    this.instance = axios.create(config);
    this.interceptorsObj = config.interceptors;
    this.cancelRequestSource = {};
    this.requests = [];

    // 请求拦截器
    this.instance.interceptors.request.use(
      (config: InternalAxiosRequestConfig) => {
        // 全局请求拦截器
        console.log('全局请求拦截器');
        
        // 添加取消令牌
        const requestId = this.generateRequestId(config);
        config.cancelToken = new axios.CancelToken(cancel => {
          this.cancelRequestSource[requestId] = cancel;
        });
        this.requests.push(requestId);

        // 自定义请求拦截器
        if (this.interceptorsObj?.requestInterceptors) {
          config = this.interceptorsObj.requestInterceptors(config);
        }
        
        return config;
      },
      (error: any) => {
        return Promise.reject(error);
      }
    );

    // 使用实例拦截器
    this.instance.interceptors.request.use(
      this.interceptorsObj?.requestInterceptors,
      this.interceptorsObj?.requestInterceptorsCatch
    );

    // 响应拦截器
    this.instance.interceptors.response.use(
      (response: AxiosResponse) => {
        const requestId = this.generateRequestId(response.config);
        this.removeRequest(requestId);
        
        // 全局响应拦截器
        console.log('全局响应拦截器');
        
        // 自定义响应拦截器
        if (this.interceptorsObj?.responseInterceptors) {
          response = this.interceptorsObj.responseInterceptors(response);
        }
        
        return response.data;
      },
      (error: any) => {
        error.config && this.removeRequest(this.generateRequestId(error.config));
        
        // 全局错误处理
        if (this.interceptorsObj?.responseInterceptorsCatch) {
          return this.interceptorsObj.responseInterceptorsCatch(error);
        }
        
        // HTTP状态码错误处理
        if (error.response) {
          this.handleHttpError(error.response.status, error.response.data);
        }
        
        // 请求被取消
        if (axios.isCancel(error)) {
          console.log('请求已被取消:', error.message);
          return Promise.reject(new Error('请求已被取消'));
        }
        
        return Promise.reject(error);
      }
    );

    // 使用实例响应拦截器
    this.instance.interceptors.response.use(
      this.interceptorsObj?.responseInterceptors,
      this.interceptorsObj?.responseInterceptorsCatch
    );
  }

  /**
   * 生成请求唯一标识
   */
  private generateRequestId(config: AxiosRequestConfig): string {
    return `${config.url}-${JSON.stringify(config.params)}-${JSON.stringify(config.data)}`;
  }

  /**
   * 移除已完成/取消的请求
   */
  private removeRequest(requestId: string): void {
    const requestIndex = this.requests.indexOf(requestId);
    if (requestIndex > -1) {
      this.requests.splice(requestIndex, 1);
    }
    delete this.cancelRequestSource[requestId];
  }

  /**
   * 取消所有请求
   */
  public cancelAllRequests(): v