使用 abortcontroller 可以取消正在进行的 fetch 请求。通过实例化一个控制器，将其 signal 属性传递给 fetch 的第二个参数配置对象，并在需要时调用控制器的 abort() 方法，即可中断网络请求并触发错误处理逻辑。

fetch 请求中如何传递信号以支持取消？

在发起请求时，需要将 AbortController 实例的 signal 放入配置对象的 signal 字段中。这样浏览器会在调用 abort() 时立即终止该请求。

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

fetch('https://api.example.com/data', { signal })
  .then(response => response.json())
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('Request cancelled');
    } else {
      console.error('Fetch failed:', error);
    }
  });

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

如何处理取消请求后的状态清理？

取消请求后，通常需要在 catch 块中识别 AbortError 以避免误报错误，同时可能需要重置 UI 状态或释放相关资源。

javascript-typescript-typescript-scaffold

你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型

下载

立即学习“Java免费学习笔记（深入）”；

// 假设有一个全局状态管理
let currentController = null;

function fetchData() {
  // 如果有正在进行的请求，先取消
  if (currentController) {
    currentController.abort();
  }
  
  currentController = new AbortController();
  const signal = currentController.signal;

  fetch('https://api.example.com/data', { signal })
    .then(response => response.json())
    .then(data => updateUI(data))
    .catch(error => {
      if (error.name !== 'AbortError') {
        handleError(error);
      }
    });
}

function cancelCurrentRequest() {
  if (currentController) {
    currentController.abort();
    currentController = null;
  }
}

基于 AbortError 判断请求是否被主动取消

当请求被取消时，fetch 会抛出一个类型为 AbortError 的错误。开发者可以通过检查错误的 name 属性来区分是用户主动取消还是网络故障。