Skip to content

axios取消请求

使用 CancelToken (较旧方式,仍可用)

这是 Axios 早期版本提供的取消请求方法:

js
const axios = require('axios');
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

// 发起请求
axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('请求被取消', thrown.message);
  } else {
    // 处理其他错误
  }
});

// 取消请求
source.cancel('操作被用户取消');
const axios = require('axios');
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

// 发起请求
axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('请求被取消', thrown.message);
  } else {
    // 处理其他错误
  }
});

// 取消请求
source.cancel('操作被用户取消');

使用 AbortController (推荐方式)

js
const axios = require('axios');

// 创建 AbortController 实例
const controller = new AbortController();

// 发起请求
axios.get('/user/12345', {
  signal: controller.signal
}).catch(function(error) {
  if (axios.isCancel(error)) {
    console.log('请求被取消');
  } else {
    // 处理其他错误
  }
});

// 取消请求
controller.abort();
const axios = require('axios');

// 创建 AbortController 实例
const controller = new AbortController();

// 发起请求
axios.get('/user/12345', {
  signal: controller.signal
}).catch(function(error) {
  if (axios.isCancel(error)) {
    console.log('请求被取消');
  } else {
    // 处理其他错误
  }
});

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

两种方式的区别

  1. CancelToken:
    • Axios 特有的实现
    • 需要额外引入 CancelToken
    • 在较旧项目中常见
  2. AbortController:
    • 基于 Web 标准 API
    • 更现代、更推荐的方式
    • 与 Fetch API 的取消机制一致
    • Node.js 从 v15.0.0 开始支持

实际应用场景

  • 用户在输入框中快速输入时取消之前的搜索请求
  • 离开页面时取消未完成的请求
  • 防止重复提交表单时取消之前的请求

建议在新项目中使用 AbortController,因为它更符合现代 Web 标准。

程序员小洛文档