umi4 中断请求

umi4 中断请求

主要是利用 axios 的 CancelToken。

app.ts

import type { RequestConfig } from "@umijs/max";

// 全局用于存放请求
let pending: any[] = [];

// 执行中断请求，以及移除中断请求
const removePending = (config: any, pending: any[] = []) => {
  for (const index in pending) {
    let curIndex = Number(index);
    // 当当前请求的信息在pending存在，即需求执行中断请求
    if (pending[curIndex].u === `${config.url}&${config.method}`) {
      // 当当前请求在数组中存在时执行函数体
      pending[curIndex].f("请求中断"); // 执行取消操作
      pending.splice(curIndex, 1); // 把这条记录从数组中移除
    }
  }
};

export const request: RequestConfig = {
  // 请求拦截
  requestInterceptors: [
    // 一个二元组，第一个元素是 request 拦截器，第二个元素是错误处理
    [
      (url, options: any) => {
        removePending(options, pending);
        options.cancelToken = new CancelToken((c) => {
          // u属性确定值唯一
          pending.push({ u: `${options.url}&${options.method}`, f: c });
        });
        return { url, options };
      },
      (error) => {
        return Promise.reject(error);
      },
    ],
  ],
};