如何在前端取消正在进行的API请求？

Question

**问题：如何在前端取消正在进行的 API 请求？** 在前端开发中，当用户快速切换页面或频繁触发请求时，可能会导致旧的 API 请求仍在进行。这些多余的请求不仅浪费网络资源，还可能引发数据混乱。因此，如何有效地取消正在进行的 API 请求成为常见需求。常见的解决方案包括使用 `AbortController` 来中断基于 `fetch` 的请求，或在使用 `axios` 时通过其内置的取消机制实现。此外，开发者还需关注清理逻辑的时机，例如在 React 中结合 `useEffect` 进行清理操作。你是否在项目中遇到过类似问题？又是如何处理的呢？

Answer 1

如何在前端取消正在进行的 API 请求？

在现代前端开发中，随着单页应用（SPA）和异步交互的普及，API 请求频繁触发已成常态。当用户快速切换页面、重复点击按钮或进行输入搜索等操作时，未完成的请求可能依然在网络中传输，这不仅浪费资源，还可能导致数据更新错乱、UI 显示异常等问题。

因此，**取消正在进行的 API 请求**成为提升用户体验与系统性能的重要手段之一。本文将从基础原理入手，逐步深入到不同场景下的实现方案，并结合主流框架如 React 的最佳实践进行讲解。

一、基本概念与原理

HTTP 请求本质上是异步行为，一旦发起就无法直接“撤销”。但浏览器提供了一些机制来中断正在进行的请求：

• AbortController：用于控制一个或多个请求的中断。
• fetch + signal：通过传入控制器信号，实现中断 fetch 请求。
• axios.CancelToken（旧版本） / AbortController（新版本）：Axios 提供了内置的取消机制。

二、Fetch API 中的取消机制

使用 AbortController 是原生 JavaScript 中取消请求的标准方式。

1. 基本用法示例：

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

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

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

2. 在组件卸载时取消请求（React 示例）：

在 React 函数组件中，通常在 useEffect 中发起请求，并在其返回的函数中执行清理逻辑。

import React, { useEffect, useState } from 'react';

function DataFetcher({ url }) {
  const [data, setData] = useState(null);

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

    fetch(url, { signal })
      .then(res => res.json())
      .then(json => setData(json))
      .catch(err => {
        if (err.name !== 'AbortError') {
          console.error(err);
        }
      });

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

  return (
    
{data ? JSON.stringify(data) : '加载中...'}
  );
}
  

三、使用 Axios 取消请求

Axios 提供了两种主要方式来取消请求：

1. 使用 CancelToken（旧版本 API）
2. 使用 AbortController（推荐，兼容性更好）

1. 使用 CancelToken（不推荐）

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/1', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c; // 存储取消函数
  })
});

// 调用取消
cancel();
  

2. 使用 AbortController（推荐）

const controller = new AbortController();

axios.get('/user/1', {
  signal: controller.signal
})
.catch((err) => {
  if (axios.isCancel(err)) {
    console.log('请求被取消:', err.message);
  } else {
    console.error('其他错误:', err);
  }
});

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

四、实际项目中的挑战与解决方案

在真实项目中，我们可能会遇到以下问题：

问题类型	解决方案
频繁输入导致多次请求（如搜索框）	使用防抖 + 请求取消
页面切换时仍有请求返回	利用组件卸载钩子取消请求
并发请求需要统一管理	使用请求队列或封装统一服务层

五、流程图分析取消机制

以下是使用 AbortController 控制请求生命周期的流程图：

mermaid
graph TD
A[开始发起请求] --> B{是否需要取消?}
B -- 否 --> C[继续请求]
B -- 是 --> D[调用 abort()]
D --> E[请求被中断]
C --> F[处理响应结果]
E --> G[捕获 AbortError 错误]
F & G --> H[结束]
  

六、进阶技巧与最佳实践

• 封装请求服务：创建统一的请求拦截器和服务模块，自动处理取消逻辑。
• 复用控制器实例：一个控制器可绑定多个请求，适合批量取消场景。
• 避免内存泄漏：确保每次请求后都释放控制器引用，尤其是在循环或高频事件中。
• 结合状态管理工具：如 Redux、Vuex 等，集中管理请求状态与取消逻辑。