2個簡單實例讓你快速理解try-catch的用法

本文轉載自查看原文 2018-10-29 23:13 682 javascript

　　相信在實際項目中，你可能經常會看到類似下面的代碼

try {
   //  嘗試執行代碼塊
}
catch(err) {
   //  捕獲錯誤的代碼塊
} 
finally {
    //  結果如何都會執行的代碼塊
}

　　簡單來說上面的代碼是用於處理代碼中可能出現的錯誤信息

　　try{} 里的代碼表示要執行的代碼

　　catch{} 用於捕獲 try{} 里代碼執行時報的錯誤信息

　　finally{} 不管怎樣都會執行的代碼

　　下面我會列出一個實例，有時候文字描述不太直觀，不便於理解，把相關代碼敲一邊，試着去理解，或許原先不明白的地方就迎刃而解了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        
        <button id="btn">點我</button>
        <p id="message"></p>
        
        <script>
            var btn = document.getElementById("btn");
            btn.addEventListener("click", clickMe);
            
            function clickMe() {
                var y = document.getElementById("message");
                
                try{
                    show();
                }
                catch(err){
                    y.innerHTML = "錯誤：" + err;
                }
            }
            
//            function show() {
//                alert(1);
//            }
        </script>
    </body>
</html>

　　注：上面實例如下圖，點擊按鈕以后執行 clickMe() 方法里的 show()方法，因為沒有定義該方法，所以報錯，提示該方法沒有定義

　　下面在通過一個實例介紹當 catch{} 捕獲到錯誤信息，通過 throw 創建自定義消息的用法

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <p>請輸入 5 和 10 之間的一個數:</p>

        <input type="text" id="data" value="" />

        <button id="btn">檢查輸入</button>

        <p id="message"></p>

        <script>
            var btn = document.getElementById("btn");
            btn.addEventListener("click", myFunction);

            function myFunction() {
                var data = document.getElementById("data").value;
                var message = document.getElementById("message");
                message.innerHTML = "";

                try {
                    if (data === 0) {
                        throw "值不能為0";
                    } else if (isNaN(data)) {
                        throw "值不能為非數字";
                    } else if (data < 5) {
                        throw "值不能小於5";
                    } else if (data > 10) {
                        throw "值不能大於10";
                    } else {
                        throw "你輸入的值沒有問題";
                    }
                }
                catch(err) {
                    message.innerHTML = "輸入的值：" + err;
                }
            }
        </script>
    </body>

</html>

　　補充：

　　①：try 和 catch （必須一起使用）

　　②：try 和 catch 和 throw （如果要創建自定義消息，就需要一起使用）

　　③：try 和 catch 和 finally （finally不是必須的，可選的）

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 什么時候需要使用try-catch 重構實踐——為了try-catch大興排場 try-catch和throw,throws的區別 Java異常處理只有Try-Catch嗎？ try catch finally的理解 Try, throw和catch用法 JavaScript try-catch語句（錯誤處理）猿類如何捕獲少女心--難以琢磨的try-catch try-catch 回滾事務，避免回滾失效的操作 Try-Catch機制使用場景分析