TypeScript二次封装axios

我们见过各种各样关于axios的网络封装，这次我采用多文件分层封装，希望你能在项目中直接拷贝可用，这就是我的目的。

创建axios.ts文件

这一层是对请求基础配置的封装

import axios, { AxiosRequestConfig } from "axios";

export interface McAxiosRequestConfig extends AxiosRequestConfig {
  extraConfig?: {
    tokenRetryCount: number; // 标记当前请求的csrf token重试次数
  };
}

const timeout = 60000; // 请求超时时间和延迟请求超时时间统一设置

const config: McAxiosRequestConfig = {
  baseURL: (import.meta.env.VITE_BASE_URL as string) || "/",
  timeout,
  headers: {
    "Content-Type": "application/json",
  },
};

const instance = axios.create(config);

instance.interceptors.request.use(async (config: McAxiosRequestConfig) => {
  if (!config.extraConfig?.tokenRetryCount) {
    config.extraConfig = {
      tokenRetryCount: 0,
    };
  }
  return config;
});

instance.interceptors.response.use(
  (response) => {
    return response;
  },
  async (err) => {
    if (axios.isCancel(err)) {
      // 取消的请求，不报错
      return;
    }

    if (err.message === "Network Error") {
      return;
    }
    if (err.message.includes("timeout")) {
      return;
    }
    if (err.response?.status >= 500) {
      return;
    }

    const { data: responseData } = err.response || {};
    const { status } = responseData || {};
    if (status) {
      switch (parseInt(status)) {
        case 004001:
          break;
        default:
          break;
      }
    }
    return err.response;
  }
);

export default instance;

创建request.ts文件

这一层是对请求方式和请求响应参数的处理

import instance, { McAxiosRequestConfig } from './axios';
import { AxiosInstance, AxiosResponse } from 'axios';

type RequestMethod = 'get' | 'post';
class Request {
  
  private instance: AxiosInstance;

  constructor(instance: AxiosInstance) {
    this.instance = instance;
  }

  /**
   * @description: get请求，参数同axios的get方法，额外增加showLoading参数用于控制全局loading状态
   * @param {string} url
   * @param {McAxiosRequestConfig} config
   * @return Promise<AxiosResponse<any>>
   */
  public get(
    url: string,
    config: McAxiosRequestConfig = {}
  ): Promise<AxiosResponse<any>> {
    return this.request('get', url, config);
  }

  /**
   * @description: post请求，参数同axios的post方法，额外增加showLoading参数用于控制全局loading状态
   * @param {string} url
   * @param {McAxiosRequestConfig} config
   * @return Promise<AxiosResponse<any>>
   */
  public post(
    url: string,
    data: any = {},
    config: McAxiosRequestConfig = {}
  ): Promise<AxiosResponse<any>> {
    return this.request('post', url, config, data);
  }

  private async request(
    method: RequestMethod,
    url: string,
    config: McAxiosRequestConfig,
    ...params: any
  ) {
    const res = await this.instance[method](url, ...params, config);
    return res;
  }
}

export const request = new Request(instance);

使用

import { request } from "./request";

/**
 * @description: 根据地图配置信息
 * @param {string} url
 * @return Promise<AxiosResponse<any>>
 */
export const getConfig = () => {
  const config: any = {headers: { 'Cache-Control': 'no-cache' }}
  return request.get("/config/config.json", config);
};

/**
 * @description: 根据url获取国家码信息
 * @param {string} url
 * @return Promise<AxiosResponse<any>>
 */
export const getCountryCode = (url: string = ''): Promise<any> => {
  return request.get("/getCountryCode", {baseURL: url});
};

点赞加关注，永远不迷路
每天一更新，创作拿命拼