如何捕获中断的AJAX请求？Axios页面刷新场景下的异常处理

我来分享一下捕获中断AJAX请求的完整方案，尤其是你提到的WebView场景里的问题——这种页面刷新导致未完成请求触发catch()的情况确实很常见，我们一步步来拆解：

一、先明确哪些操作会中断AJAX请求 #

首先得知道哪些场景会让请求在收到响应前被中断：

• 用户主动刷新页面、点击链接导航到新页面，或者关闭标签页/窗口
• 代码中主动调用请求的中断方法（比如XMLHttpRequest的abort()，或者Fetch的AbortController）
• 网络连接突然断开（比如WiFi掉线、移动数据关闭）
• WebView特有的场景：页面被重载、WebView实例被销毁/回收

二、针对不同请求方式的捕获实现 #

1. XMLHttpRequest 场景 #

对于传统的XHR请求，你可以通过监听abort事件来捕获主动/被动中断，同时在onerror里区分中断和普通网络错误：

const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data');

// 捕获主动/被动中断事件
xhr.addEventListener('abort', () => {
  console.log('AJAX请求被中断了');
  // 这里可以处理中断逻辑，比如清理状态、提示用户等
});

// 捕获错误，同时区分中断和普通错误
xhr.addEventListener('error', () => {
  // 中断时status通常为0，readyState为4
  if (xhr.status === 0 && xhr.readyState === 4) {
    console.log('请求因页面刷新/网络断开等原因被中断');
  } else {
    console.log('真正的网络错误:', xhr.statusText);
  }
});

xhr.send();

2. Fetch API 场景 #

Fetch使用AbortController来管理请求中断，捕获时可以通过判断错误类型来识别中断：

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

fetch('/api/data', { signal })
  .then(response => response.json())
  .catch(error => {
    // 中断请求时会抛出AbortError
    if (error.name === 'AbortError') {
      console.log('Fetch请求被中断了');
    } else {
      console.log('请求发生错误:', error.message);
    }
  });

// 主动中断请求的示例（比如用户点击取消按钮）
// controller.abort();

三、WebView场景的特殊处理 #

你遇到的“刷新未完成请求时catch()捕获错误”是WebView的典型行为——页面刷新时，WebView会强制终止所有未完成的网络请求，这时候这些请求会触发错误回调。

要区分这种刷新导致的中断和真正的错误，可以在catch()里做针对性判断：

• 对于XHR：如前面所说，status为0且readyState为4大概率是页面刷新/导航导致的中断
• 对于Fetch：错误信息里通常会包含"canceled"或"navigation"关键词，可以用正则匹配：

.catch(error => {
  if (error.name === 'AbortError' || /canceled|navigation/i.test(error.message)) {
    console.log('WebView页面刷新导致请求中断');
    // 这里可以忽略这类错误，或者做友好提示
  } else {
    // 处理真正的请求错误
    console.error('请求失败:', error);
  }
});

另外，如果你能控制WebView的生命周期，可以在页面刷新前主动中断所有未完成的请求，这样就能在代码里优雅处理，而不是被动等待错误触发：比如维护一个请求列表，在WebView的页面刷新钩子事件里遍历调用abort()（XHR）或controller.abort()（Fetch）。

四、关键技巧：区分中断和普通错误 #

总结几个判断标准，帮你快速区分：

• XMLHttpRequest：中断时xhr.status === 0，且会触发abort事件；普通网络错误会有非0的status码（比如404、500）
• Fetch：中断时错误name为AbortError；普通错误会返回Response对象（即使状态码错误，也会进入then而非catch，除非网络层面的失败）
• WebView特有：刷新导致的中断，错误信息通常带有"canceled"、"navigation"或"aborted"等关键词

内容的提问来源于stack exchange，提问作者Skeeith22