JavaScript 中 AbortController 怎么取消正在跑的请求-js教程-PHP中文网

abortcontroller 可取消 fetch 请求，需创建实例并传 signal 给 fetch，再调用 abort()；每个请求应独立使用 controller，react 中常在 useeffect 清理函数中调用 abort 防止内存泄漏。

javascript 中 abortcontroller 怎么取消正在跑的请求

AbortController 可以取消正在运行的 fetch 请求，关键在于把它的 signal 传给 fetch，再调用 abort() 方法。

1. 创建 AbortController 并传入 signal

每次发起需要可取消的请求前，先新建一个 AbortController 实例，把它的 signal 作为选项传给 fetch：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

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

fetch('/api/data', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => {
    if (err.name === 'AbortError') {
      console.log('请求已被取消');
    } else {
      console.error('请求出错:', err);
    }
  });

2. 调用 abort() 取消请求

在任意时机（比如用户点击“取消”按钮、组件卸载、超时等），调用 controller.abort() 即可中断请求：

// 比如 3 秒后自动取消
setTimeout(() => {
  controller.abort();
}, 3000);

// 或绑定到按钮点击
document.getElementById('cancelBtn').addEventListener('click', () => {
  controller.abort();
});

3. 注意事项和常见场景

每个请求应使用独立的 AbortController：复用同一个 controller 会同时取消所有关联请求，通常不推荐
abort() 可安全多次调用：重复调用不会报错，但只有第一次生效
fetch 是主要支持对象：现代浏览器中，fetch 原生支持 signal；XMLHttpRequest 需手动检查 signal.aborted 并调用 xhr.abort()
async/await 写法同样适用：signal 传入后，被取消时仍会抛出 AbortError，需用 try/catch 捕获

4. React 中的典型用法（组件卸载时取消）

在 useEffect 中创建 controller，清理函数里调用 abort，避免内存泄漏或状态更新错误：

useEffect(() => {
  const controller = new AbortController();

  const loadData = async () => {
    try {
      const res = await fetch('/api/user', { signal: controller.signal });
      const data = await res.json();
      setData(data);
    } catch (err) {
      if (err.name !== 'AbortError') {
        setError(err.message);
      }
    }
  };

  loadData();

  return () => controller.abort(); // 组件卸载时取消
}, []);

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南