JS网络错误处理：如何处理Ajax请求中的已知异常？

嘿，我来帮你梳理下怎么搞定这个Ajax网络错误的问题～你现在遇到的核心痛点是onerror能触发，但没法区分具体错误类型，咱们一步步来优化：

1. 先搞清楚不同错误的触发场景 #

• onabort：只有当你主动调用xhttp.abort()，或者浏览器因为页面卸载这类原因中止请求时才会触发，这个场景的错误是明确的“请求被中止”。
• onerror：覆盖的情况就多了——网络断了、服务器找不到、跨域没配置、甚至部分浏览器的超时（注意：有些浏览器超时会单独触发ontimeout，不是onerror），默认确实没法直接拿到精准错误类型，但咱们可以通过一些细节间接判断。

2. 优化你的代码，实现精准错误提示 #

你可以结合status、readyState这些属性来细化错误判断，给用户更贴合场景的提示：

const xhttp = new XMLHttpRequest();

// 处理请求被主动中止的情况
xhttp.onabort = function () {
  debug("abort");
  displayErreur("请求已被中止");
};

// 处理各类网络/请求错误
xhttp.onerror = function () {
  let errorMsg = "服务暂时无法访问";
  
  // 通过readyState和status辅助判断错误类型
  if (this.readyState === 4) {
    // 有些情况下onerror触发时，status会有具体错误码
    switch(this.status) {
      case 0:
        // 常见于网络断开、跨域未授权、服务器完全不可达
        errorMsg = "网络连接异常，请检查网络设置";
        break;
      case 404:
        errorMsg = "请求的资源不存在";
        break;
      case 500:
        errorMsg = "服务器内部错误，请稍后重试";
        break;
      default:
        errorMsg = `服务暂时无法访问（错误码：${this.status}）`;
    }
  } else {
    // readyState不是4，说明请求没完成就出错了，大概率是网络层面问题
    errorMsg = "网络连接中断，请检查网络后重试";
  }
  
  displayErreur(errorMsg);
  debug("错误详情：", this);
  debug("上传状态：", this.upload);
};

// 别忘了单独处理超时！有些浏览器超时不会触发onerror
xhttp.ontimeout = function() {
  displayErreur("请求超时，请稍后重试");
  debug("请求超时");
};

// 设置超时时间（比如10秒，根据你的需求调整）
xhttp.timeout = 10000;

3. 额外的实用小技巧 #

• 要是你的项目兼容现代浏览器，不妨试试fetch API替代XMLHttpRequest，它的错误处理逻辑更清晰，通过response.ok和response.status能直接判断错误类型，还支持Promise语法，代码会更简洁。
• 别漏了在onload里也做状态判断！有些服务器错误（比如404、500）不会触发onerror，反而会触发onload，这时候得手动校验状态码是否在200-299的成功区间：

xhttp.onload = function() {
  if (this.status >= 200 && this.status < 300) {
    // 请求成功，处理返回数据
  } else {
    // 处理服务器返回的错误状态码
    displayErreur(`请求失败：${this.statusText}（错误码：${this.status}）`);
  }
};

这样调整后，你就能给用户更精准的错误提示，而不是所有错误都用同一条消息啦～

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