一、简介

在前端开发中，取消异步请求是一个常见的需求，尤其是在用户频繁操作（如搜索框输入）或组件卸载时，避免不必要的请求和潜在的内存泄漏。以下是几种常见的实现方式：

二、实现方式

1、使用 Fetch 的 AbortController

AbortController 是现代浏览器原生支持的 API，用于取消 fetch 请求。

示例代码

// 创建AbortController.signal实例
const controller = new AbortController();
const signal = controller.signal; //
// 发起fetch请求
fetch("https://api.example.com/data", { signal }) // 将signal传递给fetch()
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((err) => {
    if (err.name === "AbortError") {
      console.log("请求已取消");
    } else {
      console.error("请求失败:", err);
    }
  });

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

2、使用 axios 的 CancelToken

axios 是一个流行的 HTTP 客户端库，支持通过 CancelToken 取消请求。需要注意浏览器兼容性

示例代码

const axios = require("axios");

// 创建CancelToken源
const source = axios.CancelToken.source();

// 发起axios请求
axios
  .get("https://api.example.com/data", {
    cancelToken: source.token, // 将CancelToken传递给 axios
  })
  .then((response) => console.log(response.data))
  .catch((err) => {
    if (axios.isCancel(err)) {
      console.log("请求已取消:", err.message);
    } else {
      console.error("请求失败:", err);
    }
  });

// 取消请求
source.cancel("用户取消了请求");

---

3、使用 XMLHttpRequest 的 abort() 方法

XMLHttpRequest 是传统的 AJAX 请求方式，支持通过 abort() 方法取消请求。需要兼容非常旧的浏览器。

示例代码

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data");
xhr.send();

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

三、总结

推荐方案

• 现代项目：优先使用 AbortController。
• 使用 axios 的项目：使用 CancelToken。
• 旧版浏览器：使用 XMLHttpRequest.abort()。

对比

方法	适用场景	优点	缺点
AbortController	现代浏览器，fetch 请求	原生支持，简单易用	不兼容旧版浏览器
axios.CancelToken	使用 axios 的项目	兼容性好，功能强大	需要引入 axios
XMLHttpRequest.abort()	传统 AJAX 请求	兼容性最好	代码冗长，功能有限
React/Vue/Angular	前端框架中取消请求	与框架生命周期结合	需要结合具体框架实现

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24