JavaScript中如何取消HTTP请求？

在JavaScript开发过程中，发起HTTP请求是常见操作，但很多场景下我们需要取消还未完成的请求，比如用户快速切换页面、重复提交表单或者请求耗时过长已经没有返回必要的情况。下面我们就逐一介绍不同请求方式对应的取消HTTP请求的方法。

一、XMLHttpRequest取消请求

XMLHttpRequest是比较早期的请求方式，它自带abort()方法，调用该方法就可以直接终止当前请求。

// 创建XMLHttpRequest实例
const xhr = new XMLHttpRequest();
// 初始化请求
xhr.open('GET', 'https://ipipp.com/api/data');
// 发送请求
xhr.send();
// 需要取消请求时调用abort方法
xhr.abort();
// 监听请求终止事件
xhr.onabort = function() {
  console.log('请求已被取消');
};

二、fetch请求取消

fetch是现在更常用的原生请求方式，它本身没有直接的取消方法，需要配合AbortController来实现请求取消，这是目前官方推荐的fetch取消请求方案。

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

// 发起fetch请求时传入signal
fetch('https://ipipp.com/api/data', { signal })
  .then(response => {
    if (!response.ok) {
      throw new Error('请求失败');
    }
    return response.json();
  })
  .then(data => {
    console.log('请求成功返回数据:', data);
  })
  .catch(err => {
    // 判断是否是主动取消导致的错误
    if (err.name === 'AbortError') {
      console.log('fetch请求已被取消');
    } else {
      console.log('请求出现其他错误:', err);
    }
  });

// 需要取消请求时调用abort方法
controller.abort();

三、axios取消请求

axios是目前使用非常广泛的第三方请求库，它也支持取消请求，同样是基于AbortController实现，当然也兼容旧版的取消方式，不过现在更推荐用AbortController的方案。

import axios from 'axios';

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

// 发起axios请求时传入signal
axios.get('https://ipipp.com/api/data', {
  signal: controller.signal
})
  .then(response => {
    console.log('请求成功返回数据:', response.data);
  })
  .catch(err => {
    if (axios.isCancel(err)) {
      console.log('axios请求已被取消:', err.message);
    } else {
      console.log('请求出现其他错误:', err);
    }
  });

// 需要取消请求时调用abort方法，还可以传入取消的原因
controller.abort('用户主动取消请求');

四、不同场景的选择建议

如果是维护旧项目用到了XMLHttpRequest，直接用自带的abort()方法就可以；如果是用原生fetch发起请求，优先选择搭配AbortController的方案；如果使用axios库，同样推荐用AbortController的方式，代码逻辑更统一，也符合最新的规范。

另外需要注意，取消请求后要做好错误捕获，区分是主动取消的错误还是其他请求错误，避免影响正常的错误处理逻辑。同时取消请求后不需要再处理返回的数据，避免不必要的性能消耗。

fetchXMLHttpRequestAbortControlleraxios修改时间：2026-05-29 23:52:43