Manejo De errores De JS Con Try a Catch y Throw
- La instrucción try le permite probar un bloque de código para detectar errores.
- La declaración catch le permite manejar el error.
- La instrucción throw le permite crear errores personalizados.
- La instrucción finally le permite ejecutar código, después de intentar y atrapar, independientemente del resultado.
Los errores sucederán
Al ejecutar código jаvascript, pueden ocurrir diferentes errores. Los errores pueden ser errores de codificación realizados por el programador, errores debidos a entradas erróneas y otras cosas imprevisibles.
Ejemplo: En este ejemplo, hemos escrito una alerta como adddlert para producir un error deliberadamente:
<p id="demo"></p>
<script>
try {
adddlert("Welcome guest!");
}
catch(err) {
document.getElementById("demo").innerHTML = err.message;
}
</script>
jаvascript try and catch
- La instrucción try le permite definir un bloque de código que se probará para detectar errores mientras se está ejecutando.
- La instrucción de catch le permite definir un bloque de código para ser ejecutado, si ocurre un error en el bloque de prueba.
- Las sentencias de try y catch vienen en pares:
try {
Bloque de código para probar
}
catch(err) {
Bloque de código para manejar errores
}
Error jаvascript Throws
Cuando se produce un error, jаvascript normalmente se detiene y genera un mensaje de error.
El término técnico para esto es: jаvascript throw an exception (throw an error) = lanzará una excepción (arrojar un error) .
jаvascript creará un Error object (objeto Error) con dos propiedades: name and message. (nombre y mensaje).
La Declaración Throws
La instrucción throw le permite crear un error personalizado. Técnicamente puedes lanzar una excepción (lanzar un error) .
La excepción puede ser una cadena de jаvascript, un número, un booleano o un objeto:
throw "Too big"; // throw a text
throw 500; // throw a number
Si usa throw junto con try y catch , puede controlar el flujo del programa y generar mensajes de error personalizados.
Ejemplo de validación de entrada
Este ejemplo examina la entrada. Si el valor es incorrecto, se lanza una excepción (err). (err) is thrown.
La excepción (err) es capturada por la declaración catch y se muestra un mensaje de error personalizado:
<!DOCTYPE html>
<html>
<body>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="p01"></p>
<script>
function myFunction() {
var message, x;
message = document.getElementById("p01");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "empty";
if(isNaN(x)) throw "not a number";
x = Number(x);
if(x < 5) throw "too low";
if(x > 10) throw "too high";
}
catch(err) {
message.innerHTML = "Input is " + err;
}
}
</script>
</body>
</html>
Validación de HTML
El código de arriba es solo un ejemplo.
Los navegadores modernos a menudo usarán una combinación de jаvascript y una validación HTML incorporada, usando reglas de validación predefinidas definidas en atributos HTML:
<input id="demo" type="number" min="5" max="10" step="1"
La declaración final
La instrucción finally le permite ejecutar código, después de intentar y atrapar, independientemente del resultado:
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
finally {
Block of code to be executed regardless of the try / catch result
}
Ejemplo:
function myFunction() {
var message, x;
message = document.getElementById("p01");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "is empty";
if(isNaN(x)) throw "is not a number";
x = Number(x);
if(x > 10) throw "is too high";
if(x < 5) throw "is too low";
}
catch(err) {
message.innerHTML = "Error: " + err + ".";
}
finally {
document.getElementById("demo").value = "";
}
}
El objeto de error
jаvascript tiene un objeto de error incorporado que proporciona información de error cuando se produce un error. El objeto de error proporciona dos propiedades útiles: nombre y mensaje.
Propiedades del objeto de error
Propiedad | Descripcion |
Nombre | Establece o devuelve un nombre de error |
Mensaje | Establece o devuelve un mensaje de error (una cadena) |
Valores de nombre de error
Seis valores diferentes pueden ser devueltos por la propiedad de nombre de error:
Nombre de error | Descripción |
---|---|
EvalError | Se ha producido un error en la función eval () |
RangeError | Se ha producido un número "fuera de rango" |
ReferenceError | Se ha producido una referencia ilegal |
Error de sintaxis | Se ha producido un error de sintaxis |
Error de tecleado | Se ha producido un error de tipo |
URIError | Se produjo un error en encodeURI () |
Los seis valores diferentes se describen a continuación.
Error evaluar
Un EvalError indica un error en la función eval ().
Error de rango
Se lanza RangeError si usa un número que está fuera del rango de valores legales.
Por ejemplo: no puede establecer el número de dígitos significativos de un número en 500.
Ejemplo
var num = 1;
try {
num.toPrecision(500); // A number cannot have 500 significant digits
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Error de referencia
Se lanza un error de referencia si usa (referencia) una variable que no ha sido declarada:
Ejemplo
var x;
try {
x = y + 1; // y cannot be referenced (used)
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Error de sintaxis
Se lanza SyntaxError si intenta evaluar el código con un error de sintaxis.
Ejemplo
try {
eval("alert('Hello)"); // Missing ' will produce an error
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Error de tecleado
Se lanza TypeError si usa un valor que está fuera del rango de tipos esperados:
Ejemplo
var num = 1;
try {
num.toUpperCase(); // You cannot convert a number to upper case
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Error
URI (identificador uniforme de recursos)
Se genera un URIError si utiliza caracteres ilegales en una función de URI:
Ejemplo
try {
decodeURI("%%%"); // You cannot URI decode percent signs
}
catch(err) {
document.getElementById("demo").innerHTML = err.name;
}
Propiedades de objetos de error no estándar
Comentarios