菜鸟教程
教程 axios tutorial

取消请求（CancelToken 与 AbortController）

在实际项目中，有时需要取消正在进行的请求，例如用户快速切换页面或重复触发搜索请求。Axios 提供两种方式来实现请求取消。

1. 使用 CancelToken（Axios v0.22 及之前版本）

javascript 
import axios from "axios";

const CancelToken = axios.CancelToken;
let cancel;

// 发送请求
axios
  .get("/users/123", {
    cancelToken: new CancelToken(function executor(c) {
      cancel = c;
    }),
  })
  .then((res) => console.log(res.data))
  .catch((err) => {
    if (axios.isCancel(err)) {
      console.log("请求被取消：", err.message);
    } else {
      console.error("请求失败：", err);
    }
  });

// 取消请求
cancel("用户主动取消请求");

2. 使用 AbortController（现代浏览器推荐）

javascript 
const controller = new AbortController();
const signal = controller.signal;

// 发送请求
axios
  .get("/users/123", { signal })
  .then((res) => console.log(res.data))
  .catch((err) => {
    if (err.name === "CanceledError") {
      console.log("请求被取消");
    } else {
      console.error("请求失败：", err);
    }
  });

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

3. 优势

  • 提升性能：取消不必要的请求，减少服务器负载和流量消耗；
  • 提升体验：避免用户切换页面或搜索时显示过期数据；
  • 兼容性：AbortController 现代浏览器支持良好，CancelToken 可兼容旧版本 Axios。

💡 小提示：在长列表搜索或表单联动请求场景中，结合请求取消机制可以显著优化性能和用户体验。

相关内容