Tratamento de Erros em JS: Promises e Async/Await!

Quando trabalhamos com chamadas assíncronas em JavaScriptIntrodução ao JavaScript e Configuração do AmbienteIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente., é essencial adotar estratégias robustas para lidar com erros e exceções que podem ocorrer durante a execução do código. Erros em requisições a servidores, falhas de rede ou dados malformatados são exemplos de problemas que precisamos tratar adequadamente. Neste tutorial, exploraremos diferentes formas de tratar erros em rotinas assíncronas, garantindo maior confiabilidade e robustez em nossa aplicação.

Por que tratar erros em chamadas assíncronas?🔗

Em operações assíncronas, o JavaScriptIntrodução ao JavaScript e Configuração do AmbienteIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente. continua executando outras tarefas enquanto aguarda o retorno de uma Promise ou a finalização de um callback. Caso um erro ocorra nesse meio tempo e não seja capturado, o comportamento do programa pode se tornar imprevisível, podendo até interromper completamente a execução ou causar resultados incorretos. Portanto, tratar erros adequadamente:

Tratando erros com Promises🔗

As Promises fornecem uma maneira de trabalhar com fluxos assíncronos sem precisar aninhar muitos callbacksCallbacks, Promises e Async/AwaitCallbacks, Promises e Async/AwaitAprenda como aplicar programação assíncrona em JavaScript utilizando callbacks, promises e async/await. Melhore o fluxo do seu código de forma prática.. Para lidar com erros, utilizamos principalmente o método .catch(), que recebe uma função de callbackCallbacks, Promises e Async/AwaitCallbacks, Promises e Async/AwaitAprenda como aplicar programação assíncrona em JavaScript utilizando callbacks, promises e async/await. Melhore o fluxo do seu código de forma prática. a ser executada caso a Promise seja rejeitada.

function buscarDados(url) {
  return new Promise((resolve, reject) => {
    // Simulação de requisição assíncrona
    setTimeout(() => {
      const sucesso = Math.random() > 0.5;
      if (sucesso) {
        resolve({ dados: "Algum conteúdo relevante" });
      } else {
        reject(new Error("Falha ao buscar dados"));
      }
    }, 1000);
  });
}
buscarDados("https://api.exemplo.com")
  .then((resposta) => {
    console.log("Dados recebidos:", resposta.dados);
  })
  .catch((erro) => {
    console.error("Ocorreu um erro:", erro.message);
  })
  .finally(() => {
    console.log("Operação finalizada (sucesso ou erro).");
  });

Observações Importantes

1. Encadeamento de PromisesCallbacks, Promises e Async/AwaitCallbacks, Promises e Async/AwaitAprenda como aplicar programação assíncrona em JavaScript utilizando callbacks, promises e async/await. Melhore o fluxo do seu código de forma prática.: ao retornar uma PromiseCallbacks, Promises e Async/AwaitCallbacks, Promises e Async/AwaitAprenda como aplicar programação assíncrona em JavaScript utilizando callbacks, promises e async/await. Melhore o fluxo do seu código de forma prática. dentro de um .then(), é possível encadear várias operações e lidar com erros no .catch() final.

2. Bloco .finally(): executa uma funçãoFunções e Escopo no JavaScriptFunções e Escopo no JavaScriptAprenda a utilizar funções e escopos em JavaScript com nosso guia prático. Melhore sua organização de código e evolua seus projetos com boas práticas. (opcional) após o fim do fluxo, independentemente de sucesso ou erro.

Tratando erros com Async/Await🔗

A sintaxe async/awaitCallbacks, Promises e Async/AwaitCallbacks, Promises e Async/AwaitAprenda como aplicar programação assíncrona em JavaScript utilizando callbacks, promises e async/await. Melhore o fluxo do seu código de forma prática. permite escrever rotinas assíncronas de forma mais linear e legível. Para capturar erros durante a execução de uma funçãoFunções e Escopo no JavaScriptFunções e Escopo no JavaScriptAprenda a utilizar funções e escopos em JavaScript com nosso guia prático. Melhore sua organização de código e evolua seus projetos com boas práticas. assíncrona, utilizamos blocos try/catch.

async function obterDados(url) {
  // Pode utilizar fetch, axios ou qualquer outra forma assíncrona
  const resposta = await fetch(url);
  if (!resposta.ok) {
    throw new Error(`Erro na requisição: ${resposta.status}`);
  }
  const dados = await resposta.json();
  return dados;
}
async function executar() {
  try {
    const resultado = await obterDados("https://api.exemplo.com");
    console.log("Resultado obtido:", resultado);
  } catch (erro) {
    console.error("Falha na operação:", erro.message);
  } finally {
    console.log("Operação finalizada (sucesso ou erro).");
  }
}
executar();

Vantagens do try/catch com async/await

Diferenças entre Promise .catch() e try/catch🔗

CaracterísticaPromise Catchtry/catch com Async/Await
Forma de sintaxeEncadeamento com
.then() e .catch()
Funções marcadas com
async e bloco try/catch
Leitura e manutençãoÚtil para fluxos
encadeados
Aproxima o flow de
escrita síncrona
Escopo de captura de errosCada chamada de
.then()/.catch()
Bloco try envolve
todas as chamadas await
Boas práticasEvitar aninhamentos
profundos
Tratar exceções em
blocos específicos

Ambas as abordagens são equivalentes no que diz respeito ao tratamento de erros. A escolha dependerá do estiloRelação entre HTML e CSSRelação entre HTML e CSSDescubra como HTML e CSS trabalham juntos para criar páginas web esteticamente agradáveis e bem estruturadas, facilitando a manutenção e o desempenho. de código do projeto, conveniência e legibilidade.

Lançando Erros Customizados🔗

Em algumas situações, você pode querer lançar (throw) seus próprios erros para indicar exceções em seu fluxo assíncronoCallbacks, Promises e Async/AwaitCallbacks, Promises e Async/AwaitAprenda como aplicar programação assíncrona em JavaScript utilizando callbacks, promises e async/await. Melhore o fluxo do seu código de forma prática.. Isso pode ser feito tanto em Promises quanto em async/awaitCallbacks, Promises e Async/AwaitCallbacks, Promises e Async/AwaitAprenda como aplicar programação assíncrona em JavaScript utilizando callbacks, promises e async/await. Melhore o fluxo do seu código de forma prática..

async function processarDados(dados) {
  if (!dados) {
    throw new Error("Nenhum dado fornecido");
  }
  // prosseguir com o processamento...
}

Ao lançar um erro dessa forma, você controla a mensagem de erro e a lógica de interrupção. Em seguida, poderá capturá-lo da forma desejada onde a funçãoFunções e Escopo no JavaScriptFunções e Escopo no JavaScriptAprenda a utilizar funções e escopos em JavaScript com nosso guia prático. Melhore sua organização de código e evolua seus projetos com boas práticas. for invocada.

Boas Práticas de Tratamento de Erros🔗

1. Mantenha a clareza: escreva mensagens de erro que facilitem o entendimento do problema.

2. Trate exceções específicas: para erros de rede, exiba mensagens apropriadas; para validações, informe campos obrigatóriosValidação de Formulários: `required`, `pattern`, `min/max`Validação de Formulários: `required`, `pattern`, `min/max`Aprenda a usar os atributos required, pattern, min e max para validar formulários HTML e garantir dados consistentes e uma melhor experiência de usuário. ao usuário etc.

3. Evite try/catch genérico demais: quando possível, divida a captura de erros em blocos menores para facilitar o debugDebugging e Ferramentas de Desenvolvimento do NavegadorDebugging e Ferramentas de Desenvolvimento do NavegadorAprenda a depurar código JavaScript com as Ferramentas do Navegador. Use console, breakpoints e debugger para solucionar bugs de forma prática..

4. Use finally para limpeza: liberar recursos, encerrar conexões ou atualizar status da interface.

5. Registre os erros (logging): em aplicações reais, manter logs é fundamental para diagnosticar problemas em produção.

6. Exponha feedback ao usuário: é crucial que o usuário saiba se algo deu errado e como prosseguir.

Conclusão🔗

O tratamento de erros e exceções em chamadas assíncronas é essencial para a construção de aplicações estáveis e confiáveis em JavaScriptIntrodução ao JavaScript e Configuração do AmbienteIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente.. Seja utilizando Promises com .catch() ou blocos try/catch com async/awaitCallbacks, Promises e Async/AwaitCallbacks, Promises e Async/AwaitAprenda como aplicar programação assíncrona em JavaScript utilizando callbacks, promises e async/await. Melhore o fluxo do seu código de forma prática., o importante!important e Boas Práticas!important e Boas PráticasDescubra como o !important afeta a cascata do CSS e aprenda boas práticas para evitar conflitos, facilitando a manutenção e depuração do código. é lidar corretamente com possíveis problemas e oferecer feedback adequado ao usuário. Ao dominar essas técnicas, você garante que sua aplicação se mantenha resiliente, independentemente dos obstáculos que possam surgir no caminho.

Autor: Marcelo V. Souza - Engenheiro de Sistemas e Entusiasta em IoT e Desenvolvimento de Software, com foco em inovação tecnológica.

Referências🔗

Compartilhar artigo

Artigos Relacionados