如何在Ajax中捕获net::ERR_ABORTED错误？

首先得明确一个关键点：你用的是JSONP请求，它和普通的AJAX（XHR）请求机制完全不同，这也是为什么try/catch和jQuery默认的error回调抓不到net::ERR_ABORTED的核心原因。

为什么常规方法无效？ #

• JSONP不是通过XMLHttpRequest发送的，它依赖动态创建<script>标签加载远程资源。浏览器对<script>标签的错误处理有特殊限制，像请求被中止、超时这类场景，往往不会触发标准错误事件，自然也无法被jQuery的error回调捕获。
• try/catch只能捕获同步执行代码中的错误，而JSONP请求是异步的，回调函数执行时已经脱离了try/catch的作用域，所以这类异步错误根本不会被它覆盖到。

可行的解决方案：手动封装带错误处理的JSONP请求 #

既然jQuery的JSONP在这类错误场景下支持有限，我们可以自己实现一个JSONP函数，手动处理超时、请求中止和错误情况：

function customJsonp(options) {
  // 生成唯一回调名，避免全局命名冲突
  const callbackName = `jsonp_callback_${Math.random().toString(36).substr(2, 10)}`;
  
  // 创建script标签
  const script = document.createElement('script');
  script.type = 'text/javascript';
  
  // 拼接请求URL，包含回调参数和自定义数据
  const urlParams = new URLSearchParams();
  urlParams.append(options.jsonp, callbackName);
  if (options.data) {
    Object.keys(options.data).forEach(key => urlParams.append(key, options.data[key]));
  }
  script.src = `${options.url}?${urlParams.toString()}`;
  
  let timeoutId;
  let isCompleted = false;

  // 定义全局回调函数，处理请求成功
  window[callbackName] = function(response) {
    clearTimeout(timeoutId);
    cleanup();
    isCompleted = true;
    options.success && options.success(response);
  };

  // 监听script加载错误，捕获请求失败/中止情况
  script.onerror = function() {
    clearTimeout(timeoutId);
    cleanup();
    if (!isCompleted) {
      options.error && options.error('请求失败或被中止');
    }
  };

  // 处理超时逻辑，超时后标记为中止错误
  if (options.timeout) {
    timeoutId = setTimeout(() => {
      cleanup();
      options.error && options.error('请求超时（可能被中止）');
    }, options.timeout);
  }

  // 清理函数：移除script标签和全局回调，避免内存泄漏
  function cleanup() {
    script.parentNode && script.parentNode.removeChild(script);
    delete window[callbackName];
  }

  // 插入script标签发起请求
  document.body.appendChild(script);
}

// 使用示例
customJsonp({
  url: 'http://example.com',
  jsonp: 'callback',
  timeout: 5000,
  success: function(response) {
    console.log('请求成功:', response);
  },
  error: function(errorMsg) {
    console.error('请求错误:', errorMsg);
    // 这里可以处理net::ERR_ABORTED这类中止错误
  }
});

额外提示 #

• 如果net::ERR_ABORTED是因为页面卸载（比如用户跳转页面）导致的，这种场景下其实不需要处理，因为页面即将销毁；但如果是页面正常运行时发生的中止，上面的方法可以通过超时或onerror事件捕获到。
• 确保目标服务器支持JSONP：服务器必须返回以指定回调函数包裹的JSON数据，否则即使请求成功也不会触发success回调，最终会被超时逻辑捕获。

内容的提问来源于stack exchange，提问作者Mohammad Ali Rony