TypeScript 语言中的 Axios 封装思想 + API 集中管理 + 无感刷新 Token

2023-10-25 14:09:43

用 Axios 和封装技巧提升前端开发效率

在前端开发中，与后端 API 交互是不可避免的，而 Axios 作为一款颇受欢迎的 HTTP 库，因其简便易用的特性备受青睐。然而，在实际开发场景中，为了增强代码的可维护性和复用性，我们往往需要对 Axios 进行进一步封装。

封装 Axios：创建自定义 HTTP 类

第一步，我们可以创建一个 TypeScript 类来封装 Axios，并提供一些基本方法，比如 get()、post()、put() 和 delete()，用于发送 HTTP 请求。同时，我们还可以对这些方法进行扩展，添加对超时时间、请求头和响应拦截器的支持，提升请求的灵活性。

class Http {
  private axiosInstance: AxiosRequestConfig;

  constructor(config: AxiosRequestConfig) {
    this.axiosInstance = axios.create(config);
  }

  get(url: string, config?: AxiosRequestConfig): Promise<any> {
    return this.axiosInstance.get(url, config);
  }

  // ... 省略其他方法
}

管理 API：建立 API 集中管理类

其次，建立一个 API 集中管理类至关重要。该类可以存储所有 API 地址和相关配置，当需要使用 API 时，我们可以直接从中获取，无需在代码中四处查找，大大提升开发效率。

class API {
  private apis: { [key: string]: string };

  constructor() {
    this.apis = {
      user: '/api/user',
      post: '/api/post',
      // ... 省略其他 API
    };
  }

  get(key: string): string {
    return this.apis[key];
  }
}

实现无感 Token 刷新：保障持续交互

当 Token 过期时，如果我们能够自动刷新 Token，无需用户手动操作，那么就能实现无感的 Token 刷新。这是一个非常有用的特性，可以保证与后端的持续交互，避免因 Token 过期而中断请求。

class TokenManager {
  private token: string;
  private timer: number;

  constructor(token: string) {
    this.token = token;
    this.timer = 0;
  }

  getToken(): string {
    return this.token;
  }

  // ... 省略其他方法
}