如何在JavaScript中捕获ERR_FILE_NOT_FOUND错误

Question

我试图用javascript来测试某个文件是否存在。（不想使用Ajax）。想要使用catch尝试处理ERR_FILE_NOT_FOUND错误。我试过了

   try{
            img.attr('src', url)
        }catch(err){
            console.log("file"+ url + " doesn't exist");
        }

但它没有赶上错误。如何捕获ERR_FILE_NOT_FOUND错误？

Answer 1

设置图像属性src不会根据现有文件的结果抛出任何内容，它只是显示图像或不显示图像。

你可以在完成加载后检查图像的大小，看看它是否为0宽度，但这仍然只是一个黑客，可能只适用于图像。

你最好的选择是jQuery with ajax并使用简单的：

$.get("/path/to/file", function(data, status) {  
   console.log("File request status: "+status); 
});

修改

您可能想要检查评论中的onerror事件，您可以使用html，如：

<img onerror="onerrFunction()">

或

js：imgObject.onerror = function(){}

您称之为'ERR_FILE_NOT_FOUND'的错误我假设您在开发者控制台中从浏览器（例如chrome）中找到，如下所示：

然而，这不是一个javascript erro被抛出，所以你无法用js代码捕获它。这只是一个帮助调试代码的浏览器错误。可能还有其他方法可以捕获这些类型的错误，但就您所问的问题而言，这可能不属于问题的范围。

Answer 2

Chrome会通知您。即使您正确地处理onerror并正确地使用try-catch进行了错误处理，并且使用了void或( )来防止错误的所有技巧-您也无法修复。它超出了Javascript的控制范围。

您能做的最好的事情就是让这些错误滚动到顶部，以免使输出混乱。如果您还希望消除每个console.log上的行号的混乱情况，以获得具有相关信息的干净输出，则此方法有效。使用\n作为换行符。虚线将错误与输出分开。

var logs = ""

function log(x) {
  logs += '\n\n' + x
}

//your code
try{
  img.attr('src', url)
}catch(err){
  log("file"+ url + " doesn't exist")
}

setTimeout(function(){
  console.log("%c" + logs, "border-top: dashed 2px black;")
}, 1000)

最好用程序结尾处调用的函数替换setTimeout。

Answer 3

我发现的唯一方法是发出虚假请求以检查文件是否存在或不存在：

  var request;
  if(window.XMLHttpRequest)
      request = new XMLHttpRequest();
  else
  request = new ActiveXObject("Microsoft.XMLHTTP");
  request.open('GET', url, false);
  request.send();
  // the object request will be actually modified
  if (request.status === 404) {
      console.log("file"+ url + " doesn't exist");
  } 
  else
  {
      img.attr('src', url)
  }

注意：它仅适用于相同的来源，因此如果您需要检查其他来源的文件。您需要使用Ajax或后端语言。