Axios 请求层封装

axois的封装思路

❗ 提示

主要包括请求拦截器和响应拦截器的封装，以及异常处理

实现全局拦截器

实现实例拦截器

实现方法拦截器

代码实现

import axois from "axios";
import type { AxiosRequestConfig, AxiosInstance, AxiosResponse } from "axios";

interface GenInterceptors<T = AxiosResponse> {
  requestSuccessFn?: (config: AxiosRequestConfig) => AxiosRequestConfig;
  requestFailFn?: (err: any) => any;
  responseSuccessFn?: (res: T) => T;
  responseFailFn?: (err: any) => any;
}

interface GenRequestConfig<T = AxiosResponse> extends AxiosRequestConfig {
  interceptors?: GenInterceptors<T>;
}

class GenRequest {
  instance: AxiosInstance;
  constructor(config: GenRequestConfig) {
    this.instance = axois.create(config);
    //   全局拦截器
    // this.instance.interceptors.request.use(
    //   (config) => {
    //     console.log("全局请求成功拦截");
    //     return config;
    //   },
    //   (err) => {
    //     console.log("全局请求失败拦截");
    //     return err;
    //   }
    // );

    this.instance.interceptors.response.use(
      (res) => {
        console.log("全局响应成功拦截");
        return res.data;
      },
      (err) => {
        console.log("全局响应失败拦截");
        return err;
      }
    );
    // 实例自身传入的拦截器
    this.instance.interceptors.request.use(
      config.interceptors?.requestSuccessFn,
      config.interceptors?.requestFailFn
    );
    this.instance.interceptors.response.use(
      config.interceptors?.responseSuccessFn,
      config.interceptors?.responseFailFn
    );
  }

  // 实现的方法
  requestt<T = any>(config: GenRequestConfig<T>) {
    return new Promise<T>((resolve, reject) => {
      this.instance
        .request<any, T>(config)
        .then((res) => {
          resolve(res);
        })
        .catch((err) => {
          reject(err);
        });
    });
  }
  get<T = any>(config: GenRequestConfig<T>) {
    return this.instance.request({ ...config, method: "get" });
  }
  post<T = any>(config: GenRequestConfig<T>) {
    return this.instance.request({ ...config, method: "post" });
  }
  put<T = any>(config: GenRequestConfig<T>) {
    return this.instance.request({ ...config, method: "put" });
  }
  delete<T = any>(config: GenRequestConfig<T>) {
    return this.instance.request({ ...config, method: "delete" });
  }
}

export default GenRequest;