封装axios 取消请求

封装 Axios 取消请求通常是为了提高 JavaScript 应用程序中 HTTP 请求的管理效率，特别是当你需要处理长时间运行的操作或者在用户取消操作时停止请求时。下面是一个简单的例子，展示了如何在 TypeScript 中使用 Axios 实现这个功能：

import axios from 'axios';

// 创建一个带取消请求功能的 Axios 实例
class CancelableAxios {
  private axiosInstance: AxiosInstance;
  private cancelTokenSource?: CancelTokenSource;

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

  // 发起请求，并返回一个可以用于取消请求的 token
  async request(url: string): Promise<{ data: any; cancel: () => void }> {
    const cancelTokenSource = axios.CancelToken.source();
    this.cancelTokenSource = cancelTokenSource;

    try {
      return await this.axiosInstance({
        url,
        method: 'GET',
        cancelToken: cancelTokenSource.token,
      });
    } catch (error) {
      if (axios.isCancel(error)) {
        console.log('Request canceled by the user');
      }
      throw error;
    }
  }

  // 取消请求
  cancel(): void {
    if (this.cancelTokenSource) {
      this.cancelTokenSource.cancel();
      this.cancelTokenSource = undefined;
    }
  }
}

const axiosWithCancel = new CancelableAxios();

// 使用示例
async function fetchData() {
  const { data, cancel } = await axiosWithCancel.request('https://api.example.com/data');

  // 用户点击取消按钮时
  if (buttonWasClickedToCancel) {
    cancel();
  }

  console.log(data);
}

fetchData();

在这个封装中，我们创建了一个 `CancelableAxios` 类，它有一个内部的 `cancelTokenSource`，并在每次请求时返回一个新的取消令牌。如果用户需要取消请求，只需要调用 `cancel()` 方法即可。