JavaScript 中怎么使用 Fetch API 的 AbortController 取消网络请求-js教程-PHP中文网

abortcontroller 是浏览器原生支持的取消 fetch 请求的标准机制，通过创建控制器获取 signal 并传入 fetch，调用 abort() 即可中断请求，被取消的请求会以 aborterror 拒绝；支持单个、多个及超时自动取消，并需在 react useeffect 中清理防止内存泄漏。

javascript 中怎么使用 fetch api 的 abortcontroller 取消网络请求

Fetch API 的 AbortController 是浏览器原生支持的取消请求机制，核心在于通过控制器生成一个 signal 传给 fetch，再调用 abort() 主动中止请求。

创建 AbortController 并传入 signal

每次需要可取消的请求时，先新建一个 AbortController 实例，把它的 signal 属性作为 fetch 的选项传入：

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

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

手动触发取消

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

调用后，fetch 会立即 reject，并抛出 AbortError
已发出但尚未响应的请求会被浏览器终止（不会发送到服务器，或中断连接）
同一 signal 可绑定多个 fetch，调用一次 abort() 会同时取消全部

配合超时自动取消

利用 setTimeout 实现请求超时控制：

Alibabacloud Sdk Client Initialization For Java

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

下载

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5秒超时

fetch('/api/data', { signal })
  .then(response => {
    clearTimeout(timeoutId);
    return response.json();
  })
  .catch(err => {
    clearTimeout(timeoutId);
    if (err.name === 'AbortError') {
      console.log('请求超时');
    }
  });

注意：务必在成功或失败后清理定时器，避免内存泄漏。

React 中的常见用法（如 useEffect 清理）

在函数组件中发起请求时，应在组件卸载前取消请求：

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

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

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

这样能防止状态更新发生在已卸载组件上，避免 React 警告和潜在错误。