如何在 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 寬度，但這仍然只是一個技巧，可能僅適用於圖像。

你最好的選擇是帶有 ajax 的 jQuery 並使用一個簡單的：

$.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 錯誤，因此您無法使用 js 代碼捕獲它。 這只是幫助調試代碼的瀏覽器錯誤。 可能還有其他方法可以捕獲這些類型的錯誤，但至於您要問什么，這可能不在問題的范圍內。

Answer 2

Chrome 這樣做是為了通知。 即使您使用try-catch正確處理錯誤並正確處理onerror以及使用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 或后端語言。