作為一名web前端工程師，JavaScript中的try...catch是我們常用的特性之一，用于處理代碼中可能出現(xiàn)的錯(cuò)誤。之所以需要它是因?yàn)楫?dāng)執(zhí)行 JavaScritp 發(fā)生錯(cuò)誤時(shí)，會(huì)停止執(zhí)行接下來(lái)的程序，出現(xiàn)的異常會(huì)導(dǎo)致程序崩潰 , 所以使用 try...catch 來(lái)處理代碼中可能出現(xiàn)的錯(cuò)誤信息

try語(yǔ)句允許我們定義在執(zhí)行時(shí)進(jìn)行錯(cuò)誤測(cè)試的代碼塊
catch 語(yǔ)句允許我們定義當(dāng) try 代碼塊發(fā)生錯(cuò)誤時(shí)，所執(zhí)行的代碼塊

舉一個(gè)簡(jiǎn)單的例子

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

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

更多實(shí)例

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

該實(shí)例檢測(cè)輸入的值是否錯(cuò)誤，如果錯(cuò)誤則拋出異常。
異常通過 catch 語(yǔ)句捕獲，并輸出自定義信息

捕獲所有異常

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

這種方式會(huì)捕獲所有異常，包括語(yǔ)法錯(cuò)誤、運(yùn)行時(shí)錯(cuò)誤和自定義錯(cuò)誤

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

捕獲異步異常

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

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

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

finally

finally()  方法返回一個(gè) Promise。在 promise 結(jié)束時(shí)，無(wú)論結(jié)果是 fulfilled 或者是 rejected，都會(huì)執(zhí)行指定的回調(diào)函數(shù)

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

拋出異常

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

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

如果在 divide 函數(shù)中 b 的值為 0，則會(huì)拋出一個(gè)包含錯(cuò)誤消息的異常。你可以使用 try...catch 來(lái)捕獲這個(gè)異常并執(zhí)行相應(yīng)的操作

捕獲錯(cuò)誤并忽略它們

有時(shí)，在調(diào)試代碼時(shí)，你可能希望暫時(shí)忽略一些錯(cuò)誤。你可以使用空的 catch 代碼塊來(lái)忽略異常

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

但是，建議不要在生產(chǎn)環(huán)境中使用這種方式。在生產(chǎn)環(huán)境中忽略異?？赡軙?huì)導(dǎo)致代碼無(wú)法預(yù)料的行為

結(jié)論

try...catch 是一個(gè)強(qiáng)大的異常處理工具。如果沒有try/catch的話，就有可能出現(xiàn)異常導(dǎo)致程序崩潰，而try/catch 則可以保證程序的正常運(yùn)行，努力學(xué)好這個(gè)工具，可以確保在編寫代碼的過程減少一些不必要的麻煩

以上就是JavaScript中的try...catch使用小技巧的詳細(xì)內(nèi)容，更多關(guān)于JavaScript try...catch使用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論