作為一名web前端工程師，JavaScript中的try...catch是我們常用的特性之一，用于處理代碼中可能出現的錯誤。之所以需要它是因為當執(zhí)行 JavaScritp 發(fā)生錯誤時，會停止執(zhí)行接下來的程序，出現的異常會導致程序崩潰 , 所以使用 try...catch 來處理代碼中可能出現的錯誤信息

try語句允許我們定義在執(zhí)行時進行錯誤測試的代碼塊
catch 語句允許我們定義當 try 代碼塊發(fā)生錯誤時，所執(zhí)行的代碼塊

舉一個簡單的例子

在下面的例子中，我們故意在 try 塊的代碼中寫了一個錯的關鍵字。 該實例本應該提醒"前端工程師！"，但彈出的是錯誤信息(ReferenceError: alaert is not defined)。 catch 塊會捕捉到 try 塊中的錯誤，并執(zhí)行代碼來處理它。

    try {
      alaert("前端工程師！"); 
    } catch (error) {
      console.log(error);
    }

更多實例

<p>請輸入 5 和 10 之間的一個數:</p> 
<input id="demo" type="text"> 
<button type="button" onclick="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 "不是一個數字"; 
        if(x > 10) throw "太大了"; 
        if(x < 5) throw "太小了"; 
     } 
     catch(err) { 
        message.innerHTML = "輸入的值 " + err; 
     } 
}
</script>

該實例檢測輸入的值是否錯誤，如果錯誤則拋出異常。
異常通過 catch 語句捕獲，并輸出自定義信息

捕獲所有異常

    try {
      // 可能會拋出異常的代碼
    } catch {
      // 處理所有異常的代碼
    }

這種方式會捕獲所有異常，包括語法錯誤、運行時錯誤和自定義錯誤

注意：在生產環(huán)境中使用時，建議具體指定要捕獲的異常類型，以便更好地診斷問題

捕獲異步異常

如果你使用了異步代碼，你可能需要捕獲異步代碼中的異常。例如，以下代碼塊使用 Promise 來異步加載資源

    try {
      const resource = await fetch("/resource");
      // 處理資源的代碼
    } catch (error) {
      // 處理異常的代碼
    }

如果在異步操作中發(fā)生異常，它會被傳遞到 catch 代碼塊中。但是，如果你沒有使用 try...catch 來捕獲異常，它將被視為未處理的異常。

finally

finally()  方法返回一個 Promise。在 promise 結束時，無論結果是 fulfilled 或者是 rejected，都會執(zhí)行指定的回調函數

   try {
      tryCode; //嘗試執(zhí)行代碼塊
    } catch (err) {
      catchCode; //捕獲錯誤的代碼塊
    } finally {
      finallyCode; // 無論 try / catch 結果如何都會執(zhí)行的代碼塊
    }

拋出異常

try...catch 不僅可以捕獲異常，還可以拋出異常。你可以使用 throw 語句在代碼中手動拋出異常

function divide(a, b) { 
 if (b === 0) { 
   throw new Error("除數不能為零"); 
} 
 return a / b; 
}

如果在 divide 函數中 b 的值為 0，則會拋出一個包含錯誤消息的異常。你可以使用 try...catch 來捕獲這個異常并執(zhí)行相應的操作

捕獲錯誤并忽略它們

有時，在調試代碼時，你可能希望暫時忽略一些錯誤。你可以使用空的 catch 代碼塊來忽略異常

    try {
      // 可能會拋出異常的代碼
    } catch {
      // 忽略異常
    }

但是，建議不要在生產環(huán)境中使用這種方式。在生產環(huán)境中忽略異常可能會導致代碼無法預料的行為

結論

try...catch 是一個強大的異常處理工具。如果沒有try/catch的話，就有可能出現異常導致程序崩潰，而try/catch 則可以保證程序的正常運行，努力學好這個工具，可以確保在編寫代碼的過程減少一些不必要的麻煩

以上就是JavaScript中的try...catch使用小技巧的詳細內容，更多關于JavaScript try...catch使用的資料請關注腳本之家其它相關文章！

最新評論