Erros JavaScript - Throw e Try to Catch

try A instrução permite que você teste erros no bloco de código.

catch A instrução permite que você lidar com erros.

throw A sentença permite que você crie erros personalizados.

finally Permite que você execute código, após o try e catch, independentemente do resultado.

Erros sempre acontecem!

A execução do código JavaScript pode gerar vários tipos de erros.

Os erros podem ser erros de codificação do programador, erros causados por entrada incorreta ou devido a outros problemas imprevisíveis.

Exemplo

Neste exemplo, usamos adddlert Escrever código de aviso para deliberadamente criar um erro:

<p id="demo"></p>
<script>
try {
    adddlert("Bem-vindo à visita!");
}
catch(err) {
    document.getElementById("demo").innerHTML = err.message;
}
</script>

Experimente você mesmo

JavaScript captura adddlert como um erro e executa código para lidar com o erro.

Try e catch no JavaScript

try A instrução permite definir um bloco de código para detectar erros durante a execução.

catch A instrução permite definir um bloco de código a ser executado, se ocorrer um erro no bloco de código try.

Sentenças do JavaScript try e catch Aparecem em pares:

try {
     Bloco de código para teste
}
 catch(err) {
     Bloco de código para tratamento de erros
}

JavaScript lança erros

Quando ocorre um erro, o JavaScript geralmente para e gera uma mensagem de erro.

A terminologia é descrita da seguinte forma:O JavaScript lança exceções (lança erros).

O JavaScript realmente cria uma exceção com duas propriedades: Objeto Error:name e mensagem.

Sentença throw

throw A sentença permite que você crie erros personalizados.

Técnicamente, você podeLançar exceção (lançar erro).

As exceções podem ser strings, números, booleanos ou objetos do JavaScript:

throw "Too big";    // Lança texto
throw 500;          // Lança um número

se você quiser throw com try e catch Juntos, eles podem controlar o fluxo do programa e gerar mensagens de erro personalizadas.

Caso de validação de entrada

Este exemplo verificará a entrada. Se o valor for incorreto, uma exceção será lançada (err).

Este exceção (err) é capturada pela sentença catch e exibe uma mensagem de erro personalizada:

<!DOCTYPE html>
<html>
<body>
<p>Por favor, insira um número entre 5 e 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Testar entrada</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 "vazio";
         if(isNaN(x)) throw "não é um número";
         x = Number(x);
        if(x < 5) throw "pequeno";
        if(x > 10) throw "demasiado grande";
    }
    catch(err) {
        message.innerHTML = "Entrada é " + err;
    }
}
</script>
</body>
</html>

Experimente você mesmo

Validação HTML

O código acima é apenas um exemplo.

Os navegadores modernos geralmente combinam JavaScript com validação HTML integrada, usando regras de validação pré-definidas definidas nas propriedades HTML:

<input id="demo" type="number" min="5" max="10" step="1">

Você aprenderá mais sobre validação de formulários em capítulos posteriores deste tutorial.

Sentença finally

finally A sentença permite que você execute código após o try e catch, independentemente do resultado:

try {
     // Código de bloco para teste;
}
 catch(err) {
     // Código de bloco para lidar com erros;
} 
finally {
     // Código de bloco executado independentemente do resultado;
}

Exemplo

function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "") throw "está vazio";
        if(isNaN(x)) throw "não é um número";
         x = Number(x);
        if(x >  10) throw "muito grande";
        if(x <  5) throw "muito pequeno";
    }
    catch(err) {
        message.innerHTML = "Erro: " + err + ".";
    }
    finally {
        document.getElementById("demo").value = "";
    }
}

Experimente você mesmo

Objeto Error

O JavaScript possui um objeto built-in error que fornece informações de erro quando ocorre um erro.

o objeto error do JavaScript oferece duas propriedades úteis:name e mensagem.

Propriedades do objeto Error

Propriedade Descrição
name Definir ou retornar o nome do erro
mensagem Definir ou retornar a mensagem de erro (uma string)

Valores de Nome de Erro

A propriedade name do objeto error pode retornar seis valores diferentes:

Nome do erro Descrição
EvalError Erro ocorrido dentro da função eval()
RangeError Ocorreu erro fora do intervalo numérico
ReferenceError Ocorreu referência ilegal
SyntaxError Ocorreu erro de sintaxe
TypeError Ocorreu erro de tipo
URIError Erro ocorrido no encodeURI()

A seguir, detalharei esses seis valores diferentes.

Erro de eval

EvalError indicando erro na função eval().

Versões mais recentes do JavaScript não lançam nenhum EvalErrorUse SyntaxError Substitua por.

Erro de faixa

RangeError será lançado quando você usar um número fora do intervalo de valores válidos.

Por exemplo: você não pode configurar o número de dígitos significativos para 500.

Exemplo

var num = 1;
try {
    num.toPrecision(500);   // Um número não pode ter 500 dígitos significativos
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Experimente você mesmo

Erro de referência

Se você usar (referenciar) uma variável não declarada, então ReferenceError será lançado:

Exemplo

var x;
try {
    x = y + 1;   // y não pode ser referenciado (usado)
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Experimente você mesmo

Erro de sintaxe

Se você calcular código com sintaxe incorreta, ele SyntaxError lançado:

Exemplo

try {
    eval("alert('Hello')");   // Faltando 'produzirá erro
}
catch(err) {
     document.getElementById("demo").innerHTML = err.name;
}

Experimente você mesmo

Erro de tipo

Se o valor que você está usando não estiver dentro do intervalo esperado, então TypeError lançado:

Exemplo

var num = 1;
try {
    num.toUpperCase();   // Você não pode converter números para maiúsculas
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Experimente você mesmo

Erro URI

Se você usar caracteres ilegais nas funções URI, então URIError lançado:

Exemplo

try {
    decodeURI("%%%");   // Você não pode codificar esses sinais de percentual em URI
 }
catch(err) {
    document.getElementById("demo").innerHTML = err.name;
}

Experimente você mesmo

Propriedades do objeto Error não padronizadas

Mozilla e Microsoft definiram propriedades do objeto error não padronizadas:

  • fileName (Mozilla)
  • lineNumber (Mozilla)
  • columnNumber (Mozilla)
  • stack (Mozilla)
  • description (Microsoft)
  • number (Microsoft)

Não use essas propriedades em sites públicos. Elas não funcionarão em todos os navegadores.