【Web】axios 工具类封装

Axios 封装工具类，包含更完善的功能和更清晰的代码结构，提升了可读性、复用性和扩展性：

关键点

1. 响应类型的细化
   明确 ApiResponse 类型，使其更具通用性。
2. 全局配置的抽离
   将 axios 的默认配置集中管理，方便后续维护。
3. 拦截器的增强
   添加更详细的错误处理和日志功能。
4. 文件上传的参数增强
   支持动态添加额外的表单字段。
5. 请求方法类型优化
   通过 TypeScript 类型定义提高类型安全性。
6. 取消请求功能
   添加取消请求的功能，便于在某些场景中手动中断请求。

完整代码

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";
import qs from "qs";
import { showToastFail } from "@/utils/my-utils";
import { getUrlParam } from "@/utils";
import { sign } from "@/utils/aes";

// 全局配置
const TIME_OUT = 30 * 1000;
const BASE_URL = process.env.VITE_API_BASE_URL || ""; // 支持环境变量配置

interface ApiResponse<T = any> {
  code: number;
  message?: string;
  data: T;
  msg?: string;
}

// 初始化 Axios 实例
const createAxiosInstance = (): AxiosInstance => {
  const instance = axios.create({
    baseURL: BASE_URL,
    timeout: TIME_OUT,
    headers: {
      "Content-Type": "application/json",
    },
    paramsSerializer: params => qs.stringify(params, { arrayFormat: "brackets" }),
  });

  // 设置拦截器
  setInterceptors(instance);

  return instance;
};

const axiosInstance = createAxiosInstance();

// 请求拦截器
function setInterceptors(instance: AxiosInstance) {
  const { type = "usdt", tgid = "123456" } = getUrlParam();

  // 请求拦截
  instance.interceptors.request.use((config: AxiosRequestConfig) => {
    const params = config.params || {};
    const data = config.data ? queryStringToObject(config.data) : {};

    const headers = {
      "Content-Type": "application/x-www-form-urlencoded",
    };

    config.headers = {
      ...headers,
      ...config.headers,
    };

    return config;
  });

  // 响应拦截
  instance.interceptors.response.use(
    (response: AxiosResponse<ApiResponse>) => {
      const { data } = response;
      if (data.code !== 0) {
        showToastFail(data?.message || data?.msg || "Request failed");
        return Promise.reject(data);
      }
      return Promise.resolve(data);
    },
    (error: any) => {
      const errorMsg = error.response?.data?.message || "Network error occurred";
      showToastFail(errorMsg);
      return Promise.reject(error);
    }
  );
}

// 查询字符串转换为对象
function queryStringToObject(queryString: string) {
  const params: Record<string, any> = {};
  new URLSearchParams(queryString).forEach((value, key) => {
    params[key] = isNaN(Number(value)) ? value : Number(value);
  });
  return params;
}

// HTTP 工具类
export const http = {
  get<T = any>(url: string, params?: any, headers?: any): Promise<ApiResponse<T>> {
    return axiosInstance({
      url,
      method: "get",
      params,
      headers,
    });
  },

  post<T = any>(url: string, data?: any, headers?: any): Promise<ApiResponse<T>> {
    return axiosInstance({
      url,
      method: "post",
      data: qs.stringify(data),
      headers,
    });
  },

  postJson<T = any>(url: string, data?: any): Promise<ApiResponse<T>> {
    return axiosInstance({
      url,
      method: "post",
      data,
      headers: {
        "Content-Type": "application/json",
      },
    });
  },

  put<T = any>(url: string, data?: any, headers?: any): Promise<ApiResponse<T>> {
    return axiosInstance({
      url,
      method: "put",
      data: qs.stringify(data),
      headers,
    });
  },

  delete<T = any>(url: string, params?: any, headers?: any): Promise<ApiResponse<T>> {
    return axiosInstance({
      url,
      method: "delete",
      params,
      headers,
    });
  },

  uploadFile<T = any>(url: string, file: File, additionalData?: Record<string, any>): Promise<ApiResponse<T>> {
    const formData = new FormData();
    formData.append("file", file);
    if (additionalData) {
      Object.keys(additionalData).forEach(key => formData.append(key, additionalData[key]));
    }

    return axiosInstance({
      url,
      method: "post",
      data: formData,
      headers: {
        "Content-Type": "multipart/form-data",
      },
    });
  },

  cancelToken(): { token: any; cancel: () => void } {
    const CancelToken = axios.CancelToken;
    let cancel: () => void;
    const token = new CancelToken(c => {
      cancel = c;
    });
    return { token, cancel };
  },
};

// 导出默认实例
export default http;

调用示例

普通请求

http.get("/api/users", { page: 1, size: 10 }).then(res => {
  console.log("User data:", res.data);
}).catch(err => {
  console.error("Request error:", err);
});

文件上传

const file = document.querySelector("input[type='file']").files[0];
http.uploadFile("/api/upload", file, { userId: 123 }).then(res => {
  console.log("Upload success:", res.data);
}).catch(err => {
  console.error("Upload failed:", err);
});

取消请求

const { token, cancel } = http.cancelToken();

http.get("/api/data", {}, { cancelToken: token })
  .then(res => console.log(res))
  .catch(err => console.error("Request canceled or failed:", err));

// 手动取消请求
cancel();