如何在 Javascript 中捕获 404 错误？

Question

我有一个 HTML 音频元素，我正在将该元素的“src”属性动态设置为存储在我们局域网上的音频文件。

这是它的工作原理：

function setSource(source) {
   audio.src = source;
}

var audio = new Audio();
var source = "http://localhost/folder/file.mp3";
setSource(source);

有时，我指向的源音频文件的链接已损坏，这会导致生成 404 错误并将其记录到浏览器控制台。

我希望能够捕获 404 错误，以防止它们被记录到控制台。

这是我尝试的方式：

function setSource(source) {
  try {
    audio.src = src;
  }//end try
  catch (e) {
    //do nothing
  }//end catch
}//end setSource

var audio = new Audio();
var source = "http://localhost/folder/file.mp3";
setSource(source);

不幸的是，我的 try/catch 语句完全没有做任何事情，错误仍然记录到控制台。 我做错了什么吗？

由于我的应用程序的性质，会有很多 404 错误，这是正常的和预期的，但对用户来说它看起来非常不稳定和“丑陋”（如果他们碰巧打开控制台）。

仅供参考：我正在使用谷歌浏览器。

Answer 1

在这种情况下，在浏览器控制台中记录 HTTP 错误是浏览器独有的功能，而不是 Javascript 或任何其他网站代码。

这是无法阻止的。

Answer 2

audio.onload = function() {
    console.log('success');
};
audio.onerror = function() {
    console.log('fail');
};
audio.src = 'http://localhost/folder/file.mp3';

Answer 3

是的。 通过最近的更新，这是可能的。 您可以在此处启用它：DevTools->Settings->General->Console->Hide network messages。

如何在 Javascript 中捕获 404 错误？