Axios 取消请求全面指南

Axios 取消请求全面指南：方法、场景与实践

一、Axios 请求取消概述

在现代前端开发中，网络请求控制是一个关键环节。随着用户交互的复杂性增加，我们经常需要对已发送但尚未完成的 HTTP 请求进行取消操作。Axios 作为目前最流行的基于 Promise 的 HTTP 客户端库，提供了强大的请求取消功能，这对于优化用户体验、减少不必要的资源消耗至关重要。

Axios 的请求取消功能主要通过两种机制实现：传统的 CancelToken 和基于浏览器原生 API 的 AbortController。随着 Axios 的版本迭代，取消请求的方式也在不断优化，从 v0.22.0 版本开始，Axios 正式支持使用 AbortController 来取消请求，这标志着 Axios 取消机制的重大升级。

在本文中，我们将深入探讨 Axios 中这两种取消请求的方法，分析它们的使用场景、适用条件，以及在实际项目中可能遇到的问题和解决方案，帮助你在不同场景下选择最合适的请求取消方式。

1.1 Axios 取消请求的核心价值

在深入探讨具体方法之前，我们需要明确请求取消功能在实际开发中的核心价值：

1. 用户体验优化：当用户在页面上快速切换选项卡或导航到其他页面时，取消正在进行的无关请求可以避免过时的数据更新，提高应用响应速度。

2. 资源管理：通过取消不再需要的请求，可以减少网络带宽占用和服务器负载，特别是在用户频繁触发请求的场景（如搜索框输入）中尤为重要。

3. 内存泄漏预防：在单页应用 (SPA) 中，如果组件卸载时不取消未完成的请求，可能导致回调函数在组件已被销毁的情况下仍试图更新 DOM，从而引发内存泄漏和潜在的应用崩溃。

4. 性能优化：在需要频繁发送请求的场景（如实时搜索或无限滚动加载）中，取消之前未完成的请求可以确保只有最新的请求得到处理，避免响应顺序混乱和不必要的计算。

二、Axios 取消请求的两种主要方法

Axios 提供了两种主要的方式来取消已发起的请求：传统的 CancelToken 和基于浏览器原生 API 的 AbortController。这两种方法各有特点，适用于不同的场景和需求。

2.1 CancelToken 方法：传统的请求取消机制

CancelToken 是 Axios 早期版本中引入的请求取消机制，它基于已被废弃的 cancelable promises 提案。虽然从 Axios v0.22.0 版本开始它已被标记为弃用，但由于其兼容性优势，仍然可以在某些场景中使用。

2.1.1 CancelToken 的工作原理

CancelToken 的核心思想是通过创建一个特殊的令牌（token），将其与 Axios 请求关联起来。当我们决定取消该请求时，只需要调用与该令牌关联的取消函数即可。

CancelToken 有两种创建方式：

1. 使用 CancelToken.source 工厂方法：这是一种更简洁的创建方式，它返回一个包含 token 和 cancel 函数的对象：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理其他错误
  }
});
// 取消请求（message参数是可选的）
source.cancel('Operation canceled by the user.');

2. 通过传递 executor 函数到 CancelToken 构造函数：这种方式允许你更精细地控制 cancel 函数的赋值：

const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor函数接收一个cancel函数作为参数
    cancel = c;
  })
});
// 取消请求
cancel();

2.1.2 CancelToken 的适用场景

尽管 CancelToken 已被弃用，但在某些特定场景下仍然适用：

1. 需要兼容旧版浏览器：当你的项目需要支持不兼容 AbortController 的旧版浏览器（如 Internet Explorer）时，CancelToken 是唯一的选择。

2. 与旧代码库集成：在维护使用 Axios 较早版本的现有项目时，继续使用 CancelToken 可以保持代码的一致性和可维护性。

3. 需要传递取消消息：CancelToken 的 cancel 方法允许你传递一个可选的取消消息，这在某些需要详细错误信息的调试场景中可能有用。

2.2 AbortController 方法：现代的请求取消机制

从 Axios v0.22.0 版本开始，官方推荐使用 AbortController 来取消请求。AbortController 是浏览器原生提供的 API，它提供了更标准、更强大的请求取消功能。

2.2.1 AbortController 的工作原理

AbortController 是浏览器提供的一个 Web API，用于中止一个或多个 Web 请求。它的工作原理是创建一个控制器对象，该对象可以生成一个信号（signal），将这个信号与请求关联，然后通过调用控制器的 abort 方法来取消关联的请求。

使用 AbortController 取消 Axios 请求的基本语法如下：

const controller = new AbortController();
axios.get('/user/12345', {
  signal: controller.signal
}).then(function(response) {
  // 处理响应
}).catch(function(err) {
  if (axios.isCancel(err)) {
    console.log('Request canceled', err.message);
  } else {
    // 处理其他错误
  }
});
// 取消请求
controller.abort();

值得注意的是，AbortController 的 abort 方法不支持传递消息参数，这是与 CancelToken 的一个重要区别。

2.2.2 AbortController 的适用场景

AbortController 作为 Axios 推荐的新取消方式，适用于以下场景：

1. 新项目开发：在全新的项目中，特别是不需要兼容旧版浏览器的情况下，AbortController 是最佳选择。

2. 现代浏览器环境：如果你确定应用的目标用户使用的是现代浏览器（如 Chrome、Firefox、Edge 等），AbortController 提供了更标准的 API。

3. 需要统一管理多个异步操作：AbortController 不仅可以用于取消 Axios 请求，还可以用于取消其他异步操作，如事件监听器、数据流等，这使得它在需要统一管理多个异步操作的场景中特别有用。

4. 与其他浏览器 API 集成：当你需要同时控制多个浏览器 API 的异步操作时，AbortController 提供了统一的接口。

三、两种取消方法的对比与选择策略

3.1 CancelToken 与 AbortController 的对比分析

为了帮助你在实际开发中做出正确的选择，下面对两种取消机制进行详细对比：

特性	CancelToken	AbortController
引入版本	早期版本	v0.22.0+
状态	已弃用	推荐使用
API 来源	Axios 自定义	浏览器原生 API
取消消息	支持传递消息参数	不支持传递消息参数
兼容性	广泛支持，包括旧版浏览器	现代浏览器支持，旧版浏览器需要 polyfill
功能范围	仅用于 Axios 请求取消	可用于多种异步操作取消（如 Fetch、事件监听器等）
错误类型	CanceledError	AbortError
错误检查方法	axios.isCancel(err)	axios.isCancel(err)
使用复杂度	中等	简单
资源管理	需要手动管理 token	自动管理资源
多请求关联	每个请求需要单独管理	可以通过一个 signal 关联多个请求

3.2 选择策略与适用条件

根据上述对比，我们可以总结出以下选择策略：

1. 新项目优先使用 AbortController：如果你正在开发一个新项目，并且不需要考虑旧版浏览器的兼容性，强烈推荐使用 AbortController。

2. 旧项目升级考虑兼容性：如果你的项目需要兼容 Internet Explorer 或其他不支持 AbortController 的旧版浏览器，应继续使用 CancelToken。

3. 考虑浏览器兼容性：在决定使用哪种取消方式之前，需要评估项目的目标用户群体使用的浏览器类型。根据最新统计，AbortController 在现代浏览器中已经得到了广泛支持，包括 Chrome（66+）、Firefox（63+）、Edge（79+）和 Safari（15+）。

4. 根据具体场景选择：

• • 当需要取消多个不同类型的异步操作时，选择 AbortController。

• • 当需要传递取消消息时，选择 CancelToken。

• • 当需要与其他浏览器 API 集成时，选择 AbortController。

5. 混合使用策略：在过渡期间，你可以同时使用这两种取消 API，即使是针对同一个请求：

const controller = new AbortController();
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user/12345', {
  cancelToken: source.token,
  signal: controller.signal
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理其他错误
  }
});
// 取消请求
source.cancel('Operation canceled by the user.');
// 或
controller.abort(); // 不支持message参数

四、实际项目中的应用场景与实现方案

4.1 组件卸载时取消请求（React 示例）

在单页应用中，组件卸载时如果还有未完成的请求，这些请求的回调函数在完成后可能会尝试更新已经不存在的组件，导致内存泄漏或应用崩溃。使用 Axios 的取消功能可以有效解决这个问题。

4.1.1 使用 CancelToken 的实现

import React, { useEffect } from 'react';
import axios from 'axios';
function UserComponent({ userId }) {
  useEffect(() => {
    const CancelToken = axios.CancelToken;
    let cancel;
    const fetchData = async () => {
      try {
        const response = await axios.get(`/api/users/${userId}`, {
          cancelToken: new CancelToken(c => cancel = c)
        });
        // 处理数据
      } catch (err) {
        if (axios.isCancel(err)) {
          console.log('Request canceled:', err.message);
        } else {
          // 处理其他错误
        }
      }
    };
    fetchData();
    return () => {
      // 组件卸载时取消请求
      cancel('组件卸载，取消请求');
    };
  }, [userId]);
  return <div>用户信息展示</div>;
}

4.1.2 使用 AbortController 的实现

import React, { useEffect } from 'react';
import axios from 'axios';
function UserComponent({ userId }) {
  useEffect(() => {
    const controller = new AbortController();
    
    const fetchData = async () => {
      try {
        const response = await axios.get(`/api/users/${userId}`, {
          signal: controller.signal
        });
        // 处理数据
      } catch (err) {
        if (axios.isCancel(err)) {
          console.log('Request canceled:', err.message);
        } else {
          // 处理其他错误
        }
      }
    };
    
    fetchData();
    
    return () => {
      // 组件卸载时取消请求
      controller.abort('组件卸载，取消请求');
    };
  }, [userId]);
  return <div>用户信息展示</div>;
}

4.2 输入防抖与搜索优化

在搜索框等需要根据用户输入实时发送请求的场景中，用户可能会快速输入多个字符，导致大量请求被发送。通过取消前一个未完成的请求，我们可以确保只处理最后一次有效的请求，提高性能并减少服务器负载。

4.2.1 使用 CancelToken 的实现

import { useState } from 'react';
import axios from 'axios';
function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  let cancel;
  const handleSearch = async (e) => {
    const newQuery = e.target.value;
    setQuery(newQuery);
    
    // 取消之前的请求
    if (cancel) {
      cancel('用户输入变化，取消之前的搜索请求');
    }
    try {
      const response = await axios.get(`/api/search?q=${newQuery}`, {
        cancelToken: new axios.CancelToken(c => cancel = c)
      });
      setResults(response.data);
    } catch (err) {
      if (axios.isCancel(err)) {
        console.log('Search request canceled:', err.message);
      } else {
        // 处理其他错误
      }
    }
  };
  return (
    <div>
      <input type="text" value={query} onChange={handleSearch} />
      <ul>
        {results.map(result => (
          <li key={result.id}>{result.title}</li>
        ))}
      </ul>
    </div>
  );
}

4.2.2 使用 AbortController 的实现

import { useState } from 'react';
import axios from 'axios';
function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [controller, setController] = useState(null);
  const handleSearch = async (e) => {
    const newQuery = e.target.value;
    setQuery(newQuery);
    
    // 取消之前的请求
    if (controller) {
      controller.abort('用户输入变化，取消之前的搜索请求');
    }
    const newController = new AbortController();
    setController(newController);
    try {
      const response = await axios.get(`/api/search?q=${newQuery}`, {
        signal: newController.signal
      });
      setResults(response.data);
    } catch (err) {
      if (axios.isCancel(err)) {
        console.log('Search request canceled:', err.message);
      } else {
        // 处理其他错误
      }
    } finally {
      // 请求完成后清理控制器
      if (newController === controller) {
        setController(null);
      }
    }
  };
  return (
    <div>
      <input type="text" value={query} onChange={handleSearch} />
      <ul>
        {results.map(result => (
          <li key={result.id}>{result.title}</li>
        ))}
      </ul>
    </div>
  );
}

4.3 全局请求取消（路由切换时）

在单页应用中，当用户切换路由时，取消所有未完成的请求是一个良好的实践，可以避免过时的数据更新和不必要的资源消耗。

4.3.1 使用 CancelToken 的全局取消实现

import axios from 'axios';
import { router } from './router';
const pendingRequests = new Map();
// 请求拦截器
axios.interceptors.request.use(config => {
  const CancelToken = axios.CancelToken;
  // 为每个请求创建CancelToken
  config.cancelToken = new CancelToken(c => {
    // 如果有相同URL的请求正在进行，先取消它
    if (pendingRequests.has(config.url)) {
      pendingRequests.get(config.url)();
    }
    // 将当前请求的cancel函数存入pendingRequests
    pendingRequests.set(config.url, c);
  });
  return config;
});
// 响应拦截器
axios.interceptors.response.use(response => {
  // 请求成功后从pendingRequests中移除
  pendingRequests.delete(response.config.url);
  return response;
}, error => {
  // 请求失败后从pendingRequests中移除
  pendingRequests.delete(error.config.url);
  return Promise.reject(error);
});
// 路由切换时取消所有未完成的请求
router.beforeEach((to, from, next) => {
  // 遍历并取消所有未完成的请求
  pendingRequests.forEach(cancel => cancel('路由切换，取消请求'));
  pendingRequests.clear();
  next();
});

4.3.2 使用 AbortController 的全局取消实现

import axios from 'axios';
import { router } from './router';
const pendingRequests = new Map();
// 请求拦截器
axios.interceptors.request.use(config => {
  const controller = new AbortController();
  // 为请求配置signal
  config.signal = controller.signal;
  
  // 如果有相同URL的请求正在进行，先取消它
  if (pendingRequests.has(config.url)) {
    pendingRequests.get(config.url).abort('相同URL的新请求已发送，取消旧请求');
  }
  // 将当前请求的controller存入pendingRequests
  pendingRequests.set(config.url, controller);
  
  return config;
});
// 响应拦截器
axios.interceptors.response.use(response => {
  // 请求成功后从pendingRequests中移除
  pendingRequests.delete(response.config.url);
  return response;
}, error => {
  // 请求失败后从pendingRequests中移除
  pendingRequests.delete(error.config.url);
  return Promise.reject(error);
});
// 路由切换时取消所有未完成的请求
router.beforeEach((to, from, next) => {
  // 遍历并取消所有未完成的请求
  pendingRequests.forEach(controller => controller.abort('路由切换，取消请求'));
  pendingRequests.clear();
  next();
});

五、实际应用中的常见问题与解决方案

5.1 错误处理与区分不同错误类型

在使用 Axios 取消请求时，正确处理错误是非常重要的。Axios 在取消请求时会抛出特定的错误，我们需要能够区分这些错误与其他网络错误。

5.1.1 错误处理问题

当使用 AbortController 取消请求时，Axios 会抛出一个错误。这个错误对象既可以是 CanceledError（当使用 axios.isCancel 检查时返回 true），也可以是 AbortError（这是浏览器原生的错误类型）。这可能导致一些混淆，特别是在处理错误时。

5.1.2 解决方案

Axios 提供了 axios.isCancel 方法来检查错误是否是由取消操作引起的，而不关心具体使用的是哪种取消机制。因此，无论你使用的是 CancelToken 还是 AbortController，都可以使用相同的错误处理逻辑：

axios.get('/api/data', {
  signal: controller.signal
}).then(response => {
  // 处理响应
}).catch(err => {
  if (axios.isCancel(err)) {
    // 处理取消错误
    console.log('Request canceled:', err.message);
  } else {
    // 处理其他错误
    console.log('Request failed:', err.message);
  }
});

需要注意的是，虽然 Axios 的 axios.isCancel 方法可以正确识别由 AbortController 取消引发的错误，但错误对象本身实际上是一个 AbortError 实例。Axios 在内部做了处理，使得无论是使用 CancelToken 还是 AbortController 取消请求，axios.isCancel 都会返回 true。

5.2 重复取消问题

在某些情况下，可能会出现多次尝试取消同一个请求的情况，这可能导致错误或其他意外行为。

5.2.1 问题描述

当一个请求已经被取消后，再次调用 cancel 方法或 abort 方法会发生什么？这取决于你使用的是哪种取消机制：

• CancelToken：如果一个请求已经被取消，再次调用 cancel 方法不会有任何效果，也不会抛出错误。

• AbortController：如果一个请求已经被取消，再次调用 abort 方法也不会有任何效果，但会抛出一个 AbortError（从 Axios v1.0.0 开始，这个错误会被 Axios 捕获并转换为 CanceledError）。

5.2.2 解决方案

为了避免重复取消问题，可以采取以下措施：

1. 使用标志变量跟踪请求状态：

let isRequestCanceled = false;
const fetchData = async () => {
  try {
    const response = await axios.get('/api/data', {
      signal: controller.signal
    });
    if (!isRequestCanceled) {
      // 处理响应
    }
  } catch (err) {
    if (axios.isCancel(err)) {
      isRequestCanceled = true;
      console.log('Request canceled');
    } else {
      // 处理其他错误
    }
  }
};

2. 在取消后清理引用：在取消请求后，将相关的控制器或 cancel 函数设置为 null，避免后续误操作：

const controller = new AbortController();
// 使用controller...
controller.abort();
controller = null; // 取消后将controller置为null

3. 在响应拦截器中统一处理：通过 Axios 的响应拦截器，可以统一处理所有请求的取消状态：

axios.interceptors.response.use(
  response => {
    // 处理响应
    return response;
  },
  error => {
    if (axios.isCancel(error)) {
      // 处理取消错误
      console.log('Request canceled:', error.message);
    } else {
      // 处理其他错误
      console.log('Request failed:', error.message);
    }
    return Promise.reject(error); // 重要：必须返回Promise.reject(error)
  }
);

5.3 取消所有请求的高效实现

在某些场景下，如用户注销或导航离开页面时，我们需要取消所有正在进行的请求。实现这一功能时，需要考虑效率和资源管理。

5.3.1 问题描述

简单地遍历所有未完成的请求并逐个取消可能会导致性能问题，特别是当有大量请求正在进行时。此外，如何高效地跟踪所有未完成的请求也是一个挑战。

5.3.2 解决方案

1. 使用全局请求队列：维护一个全局的请求队列，存储所有未完成请求的取消控制器：

const pendingRequests = new Map();
// 请求拦截器
axios.interceptors.request.use(config => {
  const controller = new AbortController();
  config.signal = controller.signal;
  // 为相同URL的请求创建一个数组来存储多个控制器（如果需要的话）
  if (!pendingRequests.has(config.url)) {
    pendingRequests.set(config.url, []);
  }
  pendingRequests.get(config.url).push(controller);
  return config;
});
// 响应拦截器
axios.interceptors.response.use(response => {
  const url = response.config.url;
  const controllers = pendingRequests.get(url);
  if (controllers) {
    // 从数组中移除当前控制器
    const index = controllers.indexOf(response.config.signal.controller);
    if (index !== -1) {
      controllers.splice(index, 1);
      // 如果数组为空，从Map中移除
      if (controllers.length === 0) {
        pendingRequests.delete(url);
      }
    }
  }
  return response;
}, error => {
  const url = error.config.url;
  const controllers = pendingRequests.get(url);
  if (controllers) {
    const index = controllers.indexOf(error.config.signal.controller);
    if (index !== -1) {
      controllers.splice(index, 1);
      if (controllers.length === 0) {
        pendingRequests.delete(url);
      }
    }
  }
  return Promise.reject(error);
});
// 取消所有请求的函数
function cancelAllRequests() {
  pendingRequests.forEach((controllers, url) => {
    controllers.forEach(controller => {
      controller.abort('All requests canceled');
    });
  });
  pendingRequests.clear();
}

2. 使用命名空间分组：如果你需要根据不同的功能模块或页面来分组管理请求，可以在请求配置中添加一个 namespace 属性，然后根据 namespace 来取消特定组的请求：

// 请求拦截器
axios.interceptors.request.use(config => {
  const controller = new AbortController();
  config.signal = controller.signal;
  // 使用命名空间来分组请求
  const namespace = config.namespace || 'default';
  if (!pendingRequests.has(namespace)) {
    pendingRequests.set(namespace, []);
  }
  pendingRequests.get(namespace).push(controller);
  return config;
});
// 取消特定命名空间的所有请求
function cancelRequestsByNamespace(namespace) {
  const controllers = pendingRequests.get(namespace);
  if (controllers) {
    controllers.forEach(controller => controller.abort(`Namespace ${namespace} requests canceled`));
    pendingRequests.delete(namespace);
  }
}

3. 使用 AbortController 的 signal 事件：AbortController 的 signal 属性是一个 AbortSignal 对象，你可以监听它的 abort 事件，这在某些情况下可能有用：

const controller = new AbortController();
const signal = controller.signal;
signal.addEventListener('abort', () => {
  console.log('Request aborted');
  // 处理取消后的操作
});
// 取消请求
controller.abort();

5.4 与其他浏览器 API 集成

AbortController 的一个强大功能是可以与其他浏览器 API 集成，实现统一的异步操作管理。

5.4.1 问题描述

在实际开发中，我们经常需要同时管理多种类型的异步操作，如网络请求、事件监听器、动画等。如何统一管理这些不同类型的异步操作，确保它们能在适当的时候被取消或清理，是一个常见的挑战。

5.4.2 解决方案

AbortController 可以与多种浏览器 API 集成，实现统一的取消管理：

1. 与事件监听器集成：

const controller = new AbortController();
const signal = controller.signal;
// 添加事件监听器，并关联到signal
window.addEventListener('resize', handleResize, { signal });
window.addEventListener('scroll', handleScroll, { signal });
// 当需要取消这些事件监听器时
controller.abort();

当调用 controller.abort () 时，所有关联到该 signal 的事件监听器都会被自动移除。

2. 与 setTimeout/setInterval 集成：虽然 AbortController 本身不直接支持取消定时器，但你可以结合使用 signal 的 abort 事件来模拟这一功能：

const controller = new AbortController();
const signal = controller.signal;
const timeoutId = setTimeout(() => {
  // 处理定时任务
}, 1000);
signal.addEventListener('abort', () => {
  clearTimeout(timeoutId);
  console.log('Timeout aborted');
});
// 取消定时任务
controller.abort();

3. 与 Web Workers 集成：AbortController 还可以用于取消 Web Worker 中的任务：

const worker = new Worker('worker.js');
const controller = new AbortController();
const signal = controller.signal;
worker.postMessage({ command: 'start', signal });
// 当需要取消时
controller.abort();

在 worker.js 中，可以监听 signal 的 abort 事件：

self.onmessage = function(e) {
  const { command, signal } = e.data;
  if (command === 'start') {
    signal.addEventListener('abort', () => {
      // 处理取消操作
      self.postMessage({ status: 'aborted' });
    });
    // 执行任务...
  }
};

5.5 性能优化与最佳实践

在使用 Axios 取消请求时，遵循一些最佳实践可以帮助你避免常见问题，提高应用性能。

5.5.1 性能优化建议

1. 避免不必要的取消：虽然取消未使用的请求可以提高性能，但频繁的取消操作本身也会带来一定的开销。在搜索框等频繁触发请求的场景中，建议结合防抖（debounce）或节流（throttle）技术，减少不必要的请求发送和取消。

2. 合理设置超时时间：使用 Axios 的 timeout 配置选项为请求设置合理的超时时间，避免长时间等待无法响应的请求：

axios.get('/api/data', {
  timeout: 5000, // 5秒后自动取消请求
  signal: controller.signal
});

3. 重用控制器：在某些情况下，可以重用 AbortController 实例，而不是每次都创建新的实例。但需要注意，一旦调用了 abort 方法，该控制器就不能再用于新的请求，必须创建新的实例。

4. 使用请求优先级：对于同时存在多个请求的情况，可以为不同的请求设置优先级，优先处理高优先级的请求，并在必要时取消低优先级的请求：

const requests = [];
function fetchData(priority) {
  const controller = new AbortController();
  requests.push({ controller, priority });
  // 按优先级排序请求
  requests.sort((a, b) => b.priority - a.priority);
  // 取消所有低优先级的请求
  while (requests.length > 1) {
    const requestToCancel = requests.pop();
    requestToCancel.controller.abort('Low priority request canceled');
  }
  return axios.get('/api/data', { signal: controller.signal });
}

5.5.2 最佳实践总结

1. 总是取消未使用的请求：在组件卸载、页面导航或用户操作导致先前的请求不再需要时，始终取消这些请求，避免不必要的资源消耗和潜在的内存泄漏。

2. 统一错误处理：使用 Axios 的请求和响应拦截器来实现统一的错误处理和取消逻辑，避免在每个请求处理中重复编写相同的代码。

3. 明确取消原因：在取消请求时，尽量提供明确的取消原因，这有助于调试和问题排查：

// CancelToken
source.cancel('用户离开页面，取消请求');
// AbortController
controller.abort('用户离开页面，取消请求');

4. 避免过度使用全局取消：虽然全局取消在某些场景下很有用，但过度使用可能会导致意外行为。优先考虑按功能模块或页面来分组管理请求，并根据需要取消特定组的请求。

5. 监控未取消的请求：在开发过程中，可以添加一些调试代码来监控未被取消的请求，帮助发现潜在的问题：

const pendingRequests = new Map();
axios.interceptors.request.use(config => {
  const controller = new AbortController();
  config.signal = controller.signal;
  pendingRequests.set(config.url, controller);
  return config;
});
axios.interceptors.response.use(response => {
  pendingRequests.delete(response.config.url);
  return response;
}, error => {
  pendingRequests.delete(error.config.url);
  return Promise.reject(error);
});
// 在开发环境中，添加一个定时检查未完成请求的功能
if (process.env.NODE_ENV === 'development') {
  setInterval(() => {
    if (pendingRequests.size > 0) {
      console.warn('There are pending requests:', pendingRequests.keys());
    }
  }, 5000);
}

六、总结与未来展望

6.1 关键知识点回顾

在本文中，我们全面探讨了 Axios 中取消请求的两种主要方法：传统的 CancelToken 和推荐的新方式 AbortController。以下是关键知识点的总结：

1. CancelToken：

• • 已被弃用，但仍可用于兼容旧版浏览器的项目

• • 通过 CancelToken.source () 或 CancelToken 构造函数创建

• • 支持传递取消消息参数

• • 适用于需要兼容旧版浏览器或与现有代码库集成的场景

2. AbortController：

• • Axios 推荐的新取消方式，从 v0.22.0 开始支持

• • 使用浏览器原生 API，功能更强大

• • 可用于取消多种异步操作，而不仅仅是 Axios 请求

• • 适用于新项目和现代浏览器环境

3. 错误处理：

• • 使用 axios.isCancel (err) 来检查请求是否被取消

• • 无论使用哪种取消方式，错误处理逻辑都是相同的

• • 取消请求会导致 Promise 被拒绝，需要适当处理错误

4. 实际应用场景：

• • 组件卸载时取消请求

• • 输入防抖与搜索优化

• • 全局请求取消（如路由切换时）

• • 与其他浏览器 API 集成

5. 最佳实践：

• • 总是取消未使用的请求

• • 使用统一的错误处理机制

• • 合理设置超时时间

• • 避免过度使用全局取消

• • 监控未取消的请求

6.2 未来发展趋势

随着浏览器技术的不断发展和旧版浏览器的逐渐淘汰，我们可以预见以下趋势：

1. AbortController 将成为主流：随着越来越多的开发者采用现代开发实践，以及旧版浏览器使用比例的下降，AbortController 将逐渐成为 Axios 请求取消的主要方式。

2. 取消功能的进一步整合：未来的浏览器版本可能会进一步增强 AbortController 的功能，使其能够更方便地与各种 API 集成，提供更统一的异步操作管理机制。

3. 更智能的请求管理：未来的 Axios 版本可能会引入更智能的请求管理功能，如自动取消不再需要的请求、请求优先级管理等。

4. 与服务器端协作取消：未来可能会出现客户端与服务器端协作取消请求的标准，允许更精细地控制请求的生命周期，特别是对于长时间运行的请求。

6.3 最后的建议

根据本文的讨论，针对不同的项目场景，我们提出以下建议：

1. 新项目建议：

• • 使用最新版本的 Axios（v1.x 以上）

• • 优先使用 AbortController 进行请求取消

• • 结合现代浏览器功能和框架特性（如 React 的 useEffect 清理函数）实现高效的请求管理

• • 遵循最佳实践，建立统一的请求和错误处理机制

2. 旧项目升级建议：

• • 在不需要兼容旧版浏览器的情况下，逐步将 CancelToken 替换为 AbortController

• • 通过请求和响应拦截器统一实现取消逻辑

• • 监控和优化现有的请求取消机制，确保其高效可靠

3. 兼容性考虑：

• • 如果需要兼容旧版浏览器，可以使用 AbortController 的 polyfill

• • 在必须支持旧版浏览器的情况下，继续使用 CancelToken

• • 对于混合环境，可以考虑同时使用两种取消机制，逐步过渡

通过合理使用 Axios 的请求取消功能，结合本文讨论的最佳实践和解决方案，你可以构建更高效、更可靠的 Web 应用，提供更好的用户体验和性能表现。

记住，在处理网络请求时，取消未使用的请求不仅是一种性能优化手段，也是良好的应用架构和资源管理的体现。