如何在JavaScript中捕获GET 404（Not Found）错误？

你用videoplayer.src = "vids/video" + count.toString() + ".mp4"设置视频路径时，遇到不存在的文件会返回404，但try/catch和window.onerror都抓不到这个错误？这是因为这两种方法本来就不适合处理媒体资源的加载错误，试试下面的方案：

核心方案：监听video元素的error事件 #

视频元素加载失败时会触发自身的error事件，这是捕获这类错误的标准方式，代码示例：

const videoplayer = document.getElementById('你的视频元素ID');

// 监听视频加载错误事件
videoplayer.addEventListener('error', function() {
  const error = this.error;
  // 404这类资源不存在/加载失败的情况，会归类到以下两种错误码
  if (error.code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED || error.code === MediaError.MEDIA_ERR_NETWORK) {
    // 执行你需要的操作，比如刷新页面
    document.location.reload(true);
  }
  // 打印错误详情用于调试
  console.log('视频加载错误:', error.message);
});

// 设置视频路径
videoplayer.src = `vids/video${count.toString()}.mp4`;

为什么之前的方法无效？ #

• try/catch失效：设置src只是触发浏览器发起异步资源请求，这个过程不在当前同步代码块的执行流程里，所以try/catch抓不到异步产生的错误。
• window.onerror失效：媒体资源的加载错误属于元素级别的资源错误，不会冒泡触发全局的window.onerror（仅部分跨域资源错误可能触发，但同域404不在此列），全局错误监听只针对脚本执行错误，不包含资源加载失败。

如果需要提前验证资源是否存在，也可以用fetch先发送HEAD请求判断：

async function checkVideoExists(url) {
  try {
    const response = await fetch(url, { method: 'HEAD' });
    return response.ok;
  } catch {
    return false;
  }
}

// 使用示例
const videoUrl = `vids/video${count.toString()}.mp4`;
checkVideoExists(videoUrl).then(exists => {
  if (exists) {
    videoplayer.src = videoUrl;
  } else {
    // 资源不存在时执行操作
    document.location.reload(true);
  }
});

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