javascript怎麼進行全域錯誤處理-js教程-PHP中文網

javascript怎麼進行全域錯誤處理

青灯夜游

發布： 2023-01-05 16:10:01

原創

3511 人瀏覽過

在JavaScript中，可以透過綁定「window.onerrot」事件來進行頁面全域error錯誤處理，語法格式「function 函數名稱(msg,url,l,c,error){//程式碼} window.onerror = 函數名;」。

javascript怎麼進行全域錯誤處理

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

JavaScript引擎執行JavaScript程式碼時，會發生各種錯誤：可能是語法或拼字錯誤，可能是瀏覽器差異（使用了瀏覽器獨特功能），也可能是伺服器傳回異常未處理，當然還有許多其它不可預測的因素。當錯誤發生時，JavaScript 引擎會中斷後續程式碼執行，並產生一個錯誤訊息。為了讓程式碼更健壯，避免程式碼意外中斷，我們需要處理各種異常。

1、局部錯誤處理

局部錯誤處理指程式碼可能出錯的地方進行錯誤捕捉處理，需要程式猿進行硬code，JavaScript錯誤處理相關有4條語句：

1）try, catch語句，錯誤捕捉語句

2）finall語句，錯誤捕捉處理後，return前製執行語句

3）throw語句，錯誤拋出語句

案例1:

try {
　　window.abcdefg();
} catch (e) {
　　alert(&#39;发生错误啦，错误信息为：&#39; e.message);
} finally {//总是会被执行
　　alert(&#39;我都会执行！&#39;);
}

登入後複製

控制台輸出：

發生錯誤啦，錯誤訊息為： window. abcdefg is not a function
我都會執行

finally語句在catch後，return前執行。

案例2

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Throw Demo</title>
</head>
<body>
<script>
function myFunction()
{
try
  {
  var x=document.getElementById("demo").value;
  if(x=="")    throw "不能为空";
  if(isNaN(x)) throw "不是有效数字";
  if(x>10)     throw "不能大于10";
  if(x<5)      throw "不能小于5";
  } catch(err) {
  var y=document.getElementById("mess");
  y.innerHTML="Error: " + err + ".";
  }
}
</script>
<p>请输入一个5到10的数字：</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>
</body>
</html>

登入後複製

throw的作用就是將可預見或不可預見的錯誤轉義成使用者可認知的錯誤。

【推薦學習：javascript高階教學】

2、全域錯誤處理

由於前端開發人員等級不一、程式碼規格程度不一，不是所有JavaScript程式碼都有錯誤處理。因此，JavaScript程式碼在執行過程中常常會因為不可預見異常而導致程式碼意外終止，為此，我們需要全域捕捉錯誤異常，並及時提醒開發人員修改程式碼。只要綁定window.onerrot事件即可進行頁面全域js error錯誤處理，程式碼如下：

	function globalErrorHandle(msg,url,l,c,error) {
		console.error("global js error: ", msg, l);
      		// TODO other things.
	}
	window.onerror = globalErrorHandle;

登入後複製

綁定window.onerrot事件，js報錯就會呼叫globalErrorHandle，其中：