如何在 Javascript 中捕获 404 错误？答案

【问题标题】：How can I catch a 404 error in Javascript?如何在 Javascript 中捕获 404 错误？
【发布时间】：2018-01-16 19:02:29
【问题描述】：

我有一个 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 错误，这是正常的和预期的，但对于用户来说，它看起来非常不稳定和“丑陋”（如果他们碰巧打开了控制台）。

仅供参考：我使用的是谷歌浏览器。

【问题讨论】：

我认为你不能阻止人们在谷歌浏览器控制台中检查错误，如果是错误，谷歌会记录它
由于我的应用程序的性质，会有很多 404 错误，这是正常的和预期的，但对于用户来说它看起来非常不稳定和“丑陋”（如果他们碰巧打开控制台) - 我已将此添加到我的问题正文中:)
@guest271314 - ServiceWorker 会阻止记录网络请求吗？
为了“保证”用户，你可以在音频对象上设置一个error 事件监听器，并在控制台中记录一些保证：p
只有在终端服务器不受 OP 控制时才需要代理服务器。如果终端服务器是，则根本不需要代理服务器：p

标签： javascript html google-chrome error-handling http-status-code-404

【解决方案1】：

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

【讨论】：

这会将“失败”记录到控制台以及标准错误。
你可以让它记录“上面的错误没什么好担心的，保持冷静并继续浏览” - 或者对最终用户同样保证的东西：p你不能从最后隐藏网络请求用户，这可能是最终用户认为的“安全”或“隐私”问题

【解决方案2】：

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

这是无法避免的。

【讨论】：

【解决方案3】：

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

How can I catch a 404 error in Javascript?

【讨论】：