# 取消请求（CancelToken 与 AbortController）

URL: https://caijiao.org/axios/concurrency-cancel/cancel
Source: docs/axios/concurrency-cancel/cancel.md
Description: 本章节讲解如何在 Axios 中取消请求，包括使用 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。

---

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