JavaScript--mecanismo de manejo de errores

  1. declaración de prueba: la declaración de prueba se usa para envolver bloques de código que pueden causar errores y detectar excepciones en ellos. Si se produce un error en el bloque try, el programa saltará inmediatamente a la instrucción catch correspondiente (si está presente) oa la instrucciónfinally.

  2. declaración catch: la declaración catch se usa para manejar la excepción lanzada en el bloque try. Permite especificar uno o más tipos de errores específicos para capturar y manejar diferentes tipos de excepciones, o se puede usar una instrucción catch genérica para capturar todas las excepciones. El bloque de código en la instrucción catch se ejecutará cuando se detecte la excepción.

  3. instrucción throw: la instrucción throw se usa para crear explícitamente errores personalizados en el código. Puede usar el objeto Error incorporado o su propia subclase para crear una nueva instancia de error y lanzarla a través de la instrucción throw. Los errores lanzados se pasarán al bloque try...catch más cercano para su manejo.

  4. Instrucción finalmente: La instrucción finalmente sigue inmediatamente al bloque try...catch, y siempre se ejecutará independientemente de si se lanza una excepción. El código en el bloque finalmente se ejecutará ya sea que la excepción sea capturada y manejada o no. Por lo general, el bloque finalmente se usa para liberar recursos o realizar operaciones de limpieza.

Formato de código:

try {
  // 可能抛出异常的代码块
  if (条件) {
    throw new Error("错误信息"); // 使用 throw 抛出异常
  }
  // ...
} catch (error) {
  // 异常处理逻辑
  console.log(error.message); // 输出错误信息
  // ...
} finally {
  // 最终要执行的代码,无论是否有异常
  // ...
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
    <title>四则运算</title>
</head>
<body>
    <h1>四则运算</h1>

    <form id="calculator">
        <label for="num1">第一个数:</label>
        <input type="number" id="num1" required><br><br>

        <label for="operator">操作符:</label>
        <select id="operator">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select><br><br>

        <label for="num2">第二个数:</label>
        <input type="number" id="num2" required><br><br>

        <button type="submit">计算</button>
    </form>

    <div id="result"></div>

    <script>
        document.getElementById("calculator").addEventListener("submit", function(event) {
            event.preventDefault();

            var num1 = document.getElementById("num1").value;
            var num2 = document.getElementById("num2").value;
            var operator = document.getElementById("operator").value;

            try {
                var result;

                switch (operator) {
                    case "+":
                        result = parseFloat(num1) + parseFloat(num2);
                        break;
                    case "-":
                        result = parseFloat(num1) - parseFloat(num2);
                        break;
                    case "*":
                        result = parseFloat(num1) * parseFloat(num2);
                        break;
                    case "/":
                        if (parseFloat(num2) === 0) {
                            throw new Error("除数不能为0!");
                        }
                        result = parseFloat(num1) / parseFloat(num2);
                        break;
                    default:
                        throw new Error("无效的操作符!");
                }

                document.getElementById("result").innerHTML = "结果:" + result;

            } catch (error) {
                document.getElementById("result").innerHTML = "错误:" + error.message;
                throw error; // 抛出异常
            } finally {
                document.getElementById("num1").value = "";
                document.getElementById("num2").value = "";
            }
        });
    </script>
</body>
</html>

Supongo que te gusta

Origin blog.csdn.net/m0_74293254/article/details/131480976
Recomendado
Clasificación