TS+Axios二次封装

学Ts也有一段时间了，虽然并没有特别难，但是在写的时候还是有很多不习惯的地方，然后想到了之前用js封装的axios，就想着用ts二次封装一下，也是百度了一些资料，才封装好。

为什么要二次封装

其实axios就挺好的，不封装也完全够用，而且axios里边也有拦截器的一些配置，但是进行二次封装的话更加方便的对接口进行管理，如果要换访问接口形式的话也更加方便修改

具体代码

import axios from "axios";

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

interface HYIntercepton<T = AxiosResponse> {
  requsetSuccessFn?: (config: AxiosRequestConfig) => AxiosRequestConfig;
  requsetFailureFn?: (err: any) => any;
  responseSuccessFn?: (res: T) => T;
  responseFailureFn?: (err: any) => any;
}
//这里可以添加自己的拦截器对其进行一个更加精细的控制
interface HYRequestConfig<T = AxiosResponse> extends AxiosRequestConfig {
  interceptors?: HYIntercepton<T>;
}




class HYRequest {
  // request实例=>axios的实例
  instance: AxiosInstance;
  constructor(config: HYRequestConfig) {
    this.instance = axios.create(config);
    // 每个实例都添加一个拦截器
    // 发送拦截器
    this.instance.interceptors.request.use(
      (config) => {
        //  全局请求成功的拦截
        // config.headers.Authorization = "";
        return config;
      },
      (err) => {
        console.log("全局请求失败的拦截器");
        return err;
      }
    );
    // 响应拦截器
    this.instance.interceptors.response.use(
      (res) => {
        console.log("全局响应成功的拦截");
        // 这里返回的是res.data
        return res.data;
      },
      (err) => {
        console.log("全局响应失败的拦截");
        return err;
      }
    );
    // 针对特定的添加拦截器
    this.instance.interceptors.request.use(
      config.interceptors?.requsetSuccessFn,
      config.interceptors?.requsetFailureFn
    );
    this.instance.interceptors.response.use(
      config.interceptors?.responseSuccessFn,
      config.interceptors?.responseFailureFn
    );
  }

  //   封装网络请求的方法(这里传入一个泛型T可以对返回进行限制)
  request<T = any>(config: HYRequestConfig<T>) {
    // 单次请求的成功拦截处理
    if (config.interceptors?.requsetSuccessFn) {
      config = config.interceptors.requsetSuccessFn(config);
    }
    // 返回Promise
    return new Promise<T>((resolve, reject) => {
      this.instance
        .request<any, T>(config)
        .then((res) => {
          /* 
          全局拦截器里边已经有了返回res.data
          这里拿到的是后端返回的结果，并对其进行二次限制
          */
          // 单次响应的成功拦截处理
          if (config.interceptors?.responseSuccessFn) {
            res = config.interceptors.responseSuccessFn(res);
          }
          resolve(res);
        })
        .catch((err) => {
          reject(err);
        });
    });
  }
  //
  get<T = any>(config: HYRequestConfig<T>) {
    return this.request({ ...config, method: "GET" });
  }
  post<T = any>(config: HYRequestConfig<T>) {
    return this.request({ ...config, method: "POST" });
  }
  delete<T = any>(config: HYRequestConfig<T>) {
    return this.request({ ...config, method: "DELETE" });
  }
  patch<T = any>(config: HYRequestConfig<T>) {
    return this.request({ ...config, method: "PATCH" });
  }
}

export default HYRequest;

总结

这里的代码更多的都是看王老师的一个代码，不由得感慨大佬的思路，之后也要不断的练习ts，还有从这个封装中也学到了很多知识。