「小墨是前端」专注分享前端技术，推荐优秀的开源项目，展示Github、Gitee上的创意作品，带你深入前端底层，一起成长。

网页加载速度慢？用户体验差？请求超时让人崩溃？别慌！今天带来 Axios 和 Fetch 的取消请求秘籍，助你轻松掌控异步操作，让网页像火箭一样飞速！

为什么需要取消请求？

想象一下，用户搜索商品，触发一个耗时请求。但用户没耐心等，立马换了个关键词重新搜索。这时，之前的请求还在默默运行，浪费资源和带宽，甚至阻塞后续请求，导致页面卡顿。取消请求，就是解决这个问题的利器！

Axios 如何取消请求？两招制胜！

Axios 提供了 CancelToken 来取消请求，有两种用法：

1. 执行器模式： 创建 CancelToken 实例，传入一个执行器函数，获取 cancel 函数。

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/api/search', {
  cancelToken: new CancelToken(c => { cancel = c; })
}).catch(e => { axios.isCancel(e) && console.log('请求取消成功！', e.message); });

// 取消请求
cancel('用户操作取消');

2. 令牌模式： 使用 axios.CancelToken.source() 创建包含 token 和 cancel 的对象，更简洁易用。

const { token, cancel } = axios.CancelToken.source();

axios.get('/api/search', { cancelToken: token });

// 取消请求
cancel('用户操作取消');

Fetch 也能取消！AbortController来帮忙

AbortController 是更通用的取消异步操作的 API。

const controller = new AbortController();

fetch('/api/search', { signal: controller.signal })
  .catch(e => { e.name === 'AbortError' && console.log('Fetch 请求取消成功!'); });

// 取消请求
controller.abort();

记住，AbortController 需要 polyfill 来兼容旧版浏览器。

手写CancelToken，深入理解原理

核心思想是利用 Promise：

function CancelToken(executor) {
  let resolve;
  this.promise = new Promise(r => resolve = r);
  executor(message => {
    resolve(message); // 触发取消
  });
}

// 使用示例 (简化版)
let cancel;
const token = new CancelToken(c => cancel = c);

fetch('/data', { cancelToken: token }); 

cancel(); // 取消请求

当调用 cancel 时，Promise 状态改变，触发后续的取消逻辑。

实战场景与技巧

• 搜索框优化: 用户输入时取消上一个请求，避免不必要的网络开销。
• 页面切换: 离开页面时取消未完成的请求，释放资源。
• 定时取消: 设置超时时间，自动取消长时间未响应的请求。

总结

取消请求看似小技巧，却能显著提升网页性能和用户体验。掌握 Axios 和 Fetch 的取消机制，让你的网页告别卡顿，飞速响应用户操作！

创作不易，欢迎大家关注、点赞、收藏、转发！我会继续分享高质量的干货和前沿的技术，给大家提供更多有价值的内容！