使用AbortController取消Fetch请求

技术教程
2025-11-06 22:23:02

AbortController 是浏览器 API，用于取消 fetch 请求。创建实例后，将其 signal 传入 fetch，调用 abort() 即可终止请求，常用于组件卸载时避免状态更新错误，需注意每次请求应独立创建 AbortController 并捕获 AbortError 错误类型。

使用abortcontroller取消fetch请求

在使用 fetch 发起网络请求时，有时需要在请求完成前主动取消它，比如用户跳转页面或执行新的搜索。J*aScript 提供了 AbortController 接口来实现这一功能。通过它，你可以优雅地终止一个或多个 fetch 请求。

什么是 AbortController？

AbortController 是浏览器提供的 API，用于中止一个或多个 DOM 请求，包括 fetch。它通过生成一个信号（signal），传递给 fetch，之后可通过调用 abort() 方法来取消请求。

如何使用 AbortController 取消 Fetch 请求

下面是使用 AbortController 控制 fetch 请求的基本步骤：

1. 创建 AbortController 实例

每当你想控制一个请求的生命周期，就创建一个新的 AbortController 对象。

2. 将 signal 传入 fetch 选项

fetch 支持一个可选的 signal 参数，用来接收中断指令。

启明星企业抽奖程序1.0

启明星企业抽奖程序系统采用ASP.NET4.0 无需数据库。在企业抽奖时，请勿关闭或者刷新页面。因为系统目前没有提供保存数据功能。例如在抽二等奖和一等奖之间，可能有时间间隔。那么，此时，你可以按F11取消全屏，然后最小化页面，再单击右下角喇叭，设置无声。1.启明星抽奖程序配置说明使用说明：在lottery/lottery文件夹下，有3个文本文件。company.txt存放公司名称，award.t

0 查看详情启明星企业抽奖程序1.0

3. 调用 abort() 方法取消请求

在适当的时候调用 controller.abort()，触发请求中止。

const controller = new AbortController();

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

// 取消请求（例如用户点击“取消”按钮）
controller.abort();

实际应用场景示例

在 React 或其他前端框架中，常用于组件卸载时防止状态更新错误：

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

  fetch('/api/user', { signal: controller.signal })
    .then(res => res.json())
    .then(data => {
      // 更新状态
    })
    .catch(err => {
      if (err.name !== 'AbortError') {
        console.error('请求失败:', err);
      }
    });

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

这样可以避免在组件已经销毁后还尝试更新状态，从而防止内存泄漏或报错。