一、请求取消的技术背景与实现价值

在SPA应用开发中，请求取消是解决竞态条件的核心手段。当用户快速切换页面或重复提交表单时，未完成的请求可能导致数据不一致或界面闪烁。主流前端框架的路由守卫、防抖节流等机制均依赖可靠的请求取消能力。

传统取消方案存在明显缺陷：

XMLHttpRequest的abort()方法仅支持粗粒度中断
缺乏统一的错误处理机制
无法与Promise链自然集成

现代解决方案通过CancelToken模式实现标准化取消，其核心价值体现在：

声明式取消：通过令牌对象管理取消状态
传播性：取消信号可沿调用链传递
兼容性：同时支持XMLHttpRequest和Fetch API

二、CancelToken设计原理

2.1 核心数据结构

class CancelToken {
  private promise: Promise<any>;
  private resolve: Function;
  private reason?: string;
  constructor(executor: (cancel: Function) => void) {
    this.promise = new Promise(resolve => {
      this.resolve = () => {
        this.reason = 'Operation canceled by user';
        resolve(new Error(this.reason));
      };
    });
    executor(this.resolve);
  }
  static source() {
    let cancel: Function;
    const token = new CancelToken(c => { cancel = c });
    return { token, cancel };
  }
}

2.2 工作流程解析

创建阶段：通过CancelToken.source()生成令牌对象
传播阶段：将token作为配置参数传递给axios实例
触发阶段：调用cancel()方法设置拒绝状态
中断阶段：请求适配器检测到取消状态后终止传输

2.3 状态管理机制

采用Promise链实现异步状态同步：

初始状态：pending
取消触发：resolve携带CancelError
请求拦截：通过try/catch捕获取消异常

三、请求取消的完整实现

3.1 核心模块集成

在Axios类中扩展取消功能：

class Axios {
  constructor() {
    this.interceptors = {
      request: new InterceptorManager(),
      response: new InterceptorManager()
    };
    this.cancelTokenMap = new WeakMap();
  }
  request(config: AxiosRequestConfig) {
    // 处理取消令牌
    if (config.cancelToken) {
      config.cancelToken.promise.then(reason => {
        const err = new Error(reason);
        err.isCancel = true;
        throw err;
      });
    }
    // 创建请求链
    const chain = [dispatchRequest, undefined];
    // 应用拦截器...
  }
}

3.2 适配器层改造

XMLHttpRequest适配器实现：

function xhrAdapter(config: AxiosRequestConfig) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    const cancelToken = config.cancelToken;
    xhr.open(config.method, config.url);
    // 设置取消监听
    if (cancelToken) {
      cancelToken.promise.then(reason => {
        xhr.abort();
        reject(new Error(reason));
      });
    }
    xhr.onload = () => resolve(/*...*/);
    xhr.onerror = () => reject(/*...*/);
    xhr.send(config.data);
  });
}

3.3 错误处理体系

自定义CancelError类型：

class CancelError extends Error {
  isCancel: boolean = true;
  constructor(message: string) {
    super(message);
    this.name = 'CancelError';
  }
}
// 在请求拦截链中统一处理
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.isCancel) {
      console.log('Request canceled:', error.message);
      return Promise.reject(error);
    }
    // 其他错误处理...
  }
);

四、高级应用场景

4.1 并发请求控制

const cancelToken = CancelToken.source();
// 第一个请求
axios.get('/api/data1', { cancelToken: cancelToken.token })
  .catch(err => {
    if (!err.isCancel) throw err;
  });
// 第二个请求（10秒后取消第一个）
setTimeout(() => {
  cancelToken.cancel('Timeout after 10s');
  axios.get('/api/data2');
}, 10000);

4.2 路由切换取消

在Vue Router守卫中实现：

router.beforeEach((to, from, next) => {
  const pendingRequests = store.state.pendingRequests;
  if (pendingRequests.length > 0) {
    const cancelToken = CancelToken.source();
    store.commit('SET_CANCEL_TOKEN', cancelToken);
    cancelToken.cancel(`Navigation canceled requests to ${from.path}`);
  }
  next();
});

4.3 防抖节流集成

结合lodash实现节流取消：

import { throttle } from 'lodash';
const throttledSearch = throttle((query, cancelToken) => {
  return axios.get('/search', {
    params: { q: query },
    cancelToken
  });
}, 300, { leading: false });
// 使用时自动处理取消
let currentToken = CancelToken.source();
throttledSearch('keyword', currentToken.token)
  .catch(err => {
    if (err.isCancel) console.log('Throttled request canceled');
  });
// 更新令牌
function updateSearch(newQuery) {
  currentToken.cancel('New search started');
  currentToken = CancelToken.source();
  throttledSearch(newQuery, currentToken.token);
}

五、性能优化与最佳实践

5.1 内存管理策略

使用WeakMap存储请求与令牌的关联关系
在请求完成时自动清理取消监听
避免在拦截器中创建不必要的取消令牌

5.2 错误边界处理

// 全局错误捕获
window.addEventListener('unhandledrejection', event => {
  if (event.reason?.isCancel) {
    event.preventDefault();
    // 特殊处理取消错误
  }
});

5.3 测试方案建议

使用Jest模拟取消场景：

test('should cancel request', async () => {
const { cancel, token } = CancelToken.source();
const promise = axios.get('/test', { cancelToken: token });
cancel('Test cancel');
await expect(promise).rejects.toThrow('Test cancel');
});

集成测试中验证取消状态传播

六、总结与展望

请求取消机制是构建健壮前端应用的基础设施。通过CancelToken模式，开发者可以：

实现精细化的请求生命周期管理
构建更可靠的竞态条件处理方案
优化移动端等弱网环境下的用户体验

未来发展方向包括：

集成AbortController标准API
支持Service Worker层的请求取消
与Web Streams API结合实现流式传输控制

完整实现代码可参考开源社区的axios-cancelable等扩展库，建议在实际项目中结合TypeScript进行类型强化，进一步提升代码可靠性。

深度解析Axios请求取消机制：从原理到实现