如何用XMLHttpRequest()和JavaScript捕获GET请求的404错误

你的问题出在同步XMLHttpRequest的异常处理上：当请求遇到网络错误（比如跨域、DNS解析失败、服务器无法连接）时，同步请求会直接抛出DOMException，代码根本执行不到检查http.status的步骤；而且同步请求会阻塞主线程，是现代浏览器不推荐的写法。

修改方案（推荐异步请求） #

改用异步请求，通过事件监听处理请求结果和错误，这样既能捕获404状态，也能处理网络层面的错误：

const imgURL = document.querySelectorAll('img');

imgURL.forEach(e => {
  const url = e.getAttribute('src');
  const http = new XMLHttpRequest();

  // 异步请求（第三个参数默认true，可省略）
  http.open('GET', url);

  // 请求完成后触发（无论成功或失败）
  http.addEventListener('load', () => {
    if (http.status === 404) {
      console.log('图片404错误:', url);
    } else if (http.status >= 200 && http.status < 300) {
      console.log('图片加载正常:', url);
    } else {
      console.log('其他HTTP错误:', http.status, url);
    }
  });

  // 处理网络错误（比如无法连接服务器、跨域）
  http.addEventListener('error', () => {
    console.log('网络请求失败，无法加载:', url);
  });

  http.send();
});

关键说明 #

• 异步请求优势：不会阻塞页面主线程，符合现代浏览器的性能要求
• load事件：用于获取HTTP响应状态，包括404、500等服务器返回的状态码
• error事件：处理网络层面的错误，这类情况没有HTTP状态码（请求未到达服务器）

若必须使用同步请求（不推荐） #

如果因特殊需求要保留同步请求，需要用try-catch包裹send()调用，捕获抛出的异常：

const imgURL = document.querySelectorAll('img');

imgURL.forEach(e => {
  const url = e.getAttribute('src');
  const http = new XMLHttpRequest();

  http.open('GET', url, false);
  
  try {
    http.send();
    if (http.status === 404) {
      console.log('You got an ERROR!');
    }
  } catch (err) {
    console.log('请求发送失败:', err.message);
  }
});

注意：同步请求会阻塞页面交互，在多数场景下不建议使用。

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