JS錯誤處理機制-try、catch、finally和throw

一、JS遇到錯誤

當js引擎執行js程序時,會發生各種錯誤。

1、可能是語法錯誤,通常是程序員造成的編碼錯誤或者錯別字。

2、可能是拼寫錯誤或語言中缺少的功能(可能由於瀏覽器的差異)。

3、可能是由於來自服務器或用戶的錯誤輸出而導致的錯誤。

4、可能是由於許多其他不可預知的因素。

二、JS拋出錯誤

當錯誤發生時,當事情出問題時,js引擎通常會停止執行,並拋出一個錯誤消息。

使用throw語句也可以創建自定義消息。

三、try...catch...finally結構

try/catch/finally語句用於處理代碼中可能出現的錯誤信息。

【1】定義和用法

         try語句:定義在執行時進行錯誤測試的代碼塊。

        catch語句:定義當try代碼塊發生錯誤時,所執行的代碼塊。

        finally語句:在try和catch之後,無論try和catch結果有無異常都會執行。

        注意:catch和finally語句都是可選的,但你在使用try語句時必須至少使用其中的一個。

    1、 事情還有得挽回, 換條路走
    try {
      // 執行某個邏輯,沒出錯,則按流程正常執行
    } catch (err) {
      //出問題了, 換個邏輯執行
    } finally {
      // 可選,無論try/catch結果如何都會執行的代碼塊
    }
 
 
    2、 體面的退出
    try {
      // 執行某個邏輯,沒出錯,則按流程正常執行
    } catch (err) {
      // 出問題了,彈個框告訴用戶出錯了,終止執行
      // err參數就是拋出的錯誤信息
    } finally {
      // 可選,無論try/catch結果如何都會執行的代碼塊
    }

四、throw語句

throw語句允許我們創建自定義錯誤。throw語句的作用是手動中斷程序執行,創建並拋出一個異常,異常可以是js字符串、數字、邏輯值或對象。

【1】語法。

// 拋出一個字符串
throw 'Error!';            // Uncaught Error!


// 拋出一個數值
throw 404;                 // Uncaught 404


//拋出一個布爾值
throw true;               // Uncaught true


// 拋出一個對象
throw {
  toString: function() {
              return 'Error!';
}
};  // Uncaught { toString: f}

【2】案例。

if(x < 0){
   throw new Error('x必須爲正數');
}

五、注意

如果把throw和try和catch一起使用,那麼可以控制程序流,並生成自定義的錯誤消息。

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
  </style>
</head>
 
<body>
  <p>請輸出一個 1 到 10 之間的數字:</p >
  <input id="demo" type="text">
  <button type="button" οnclick="myFunction()">測試輸入</button>
  <p id="message"></p >
  <script>
    function myFunction() {
      var message, x;
      message = document.getElementById("message");
      message.innerHTML = "";
      x = document.getElementById("demo").value;
      try {
        if (x == "") throw "值爲空";
        if (isNaN(x)) throw "不是數字";
        x = Number(x);
        if (x < 1) throw "太小";
        if (x > 10) throw "太大";
      } catch (err) {
        message.innerHTML = "錯誤: " + err;
      }
    }
  </script>
</body>
 
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章