Como tratar erros com Axios

Neste artigo vou te mostrar como tratar erros com Axios, utilizaremos uma abordagem muito simples para isso!

Fala programador(a), beleza? Bora aprender mais sobre Axios!

Axios é uma biblioteca popular para fazer requisições HTTP em aplicações JavaScript.

Ele é amplamente utilizado em projetos React e Angular, entre outros.

Como qualquer biblioteca de requisição HTTP, é importante saber como tratar erros que possam ocorrer durante uma requisição.

Existem várias maneiras de tratar erros com Axios, mas uma das formas mais comuns é utilizando o interceptor de erros.

Os interceptores são funções que podem ser registradas globalmente no Axios e serão chamadas automaticamente antes e depois de cada requisição.

Os interceptores de erros são chamados quando uma requisição falha e retorna um código de status HTTP diferente de 2xx.

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

474 aulas
20 projetos
39h 27min

Para registrar um interceptor de erros globalmente, você pode usar o método “axios.interceptors.response.use”. Por exemplo:

axios.interceptors.response.use(response => {
  // Sucesso
  return response;
}, error => {
  // Erro
  // Tratar o erro aqui
  return Promise.reject(error);
});

Dentro do interceptor de erros, você pode tratar o erro de acordo com suas necessidades.

Por exemplo, você pode mostrar uma mensagem de erro para o usuário, redirecioná-lo para uma página de erro ou simplesmente registrar o erro no console.

Além do interceptor global, você também pode tratar erros de forma individual para cada requisição.

Para fazer isso, você pode adicionar um segundo parâmetro para o método “then” ou usar o método “catch” na promessa retornada pela requisição:

axios.get('/users/1')
  .then(response => {
    // Sucesso
  })
  .catch(error => {
    // Erro
    // Tratar o erro aqui
  });

É importante notar que, ao tratar erros com interceptors ou na promise, é importante sempre chamar o método “reject” para garantir que a promise seja rejeitada e, assim, possa ser tratada pelo próximo catch.

Em resumo, tratar erros com Axios é uma tarefa importante que garante que sua aplicação possa lidar de forma adequada com falhas de requisição.

Isso pode ser feito usando interceptors globais ou tratando os erros individualmente para cada requisição.

Certifique-se de sempre chamar o método “reject” para garantir que a promise seja rejeitada e possa ser tratada pelo próximo catch.

Deixe um comentário contando o que achou deste artigo 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Em resumo, tratar erros com Axios é uma tarefa importante que garante que sua aplicação possa lidar de forma adequada com falhas de requisição.

Existem várias maneiras de fazer isso, incluindo o uso de interceptores globais e tratando os erros individualmente para cada requisição.

Usando interceptors, é possível tratar os erros de forma global, antes e depois de cada requisição, e é possível tratar os erros individualmente usando o método “catch” na promise retornada pela requisição.

Lembre-se de sempre chamar o método “reject” para garantir que a promise seja rejeitada e possa ser tratada pelo próximo catch.

A implementação correta de tratamento de erros ajuda a garantir que sua aplicação seja robusta e possa lidar com falhas de requisição de forma eficiente.

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!

Tratando erros com async/await e try/catch:

Hoje em dia boa parte do código usa async/await no lugar de then e catch

E aqui muita gente trava, porque sem o catch da promise fica a dúvida: COMO capturar o erro?

A resposta é o try/catch de sempre, se liga:

async function buscarUsuario() { try { const response = await axios.get(‘/users/1’) // Sucesso return response.data } catch (error) { // Erro // Tratar o erro aqui console.log(error) } }

O await ‘destrava’ a promise e devolve a resposta direto

Se a requisição falhar, o Axios lança o erro e ele cai no bloco catch, igualzinho ao catch da promise

Simples assim =)

Entendendo o objeto de erro do Axios:

Antes de tratar, vale entender O QUE o Axios te entrega quando algo dá errado

O objeto error não é sempre igual, e isso faz diferença na hora de mostrar a mensagem certa pro usuário

São basicamente três cenários:

error.response existe quando o servidor respondeu, mas com um status de erro (a famosa resposta fora da faixa 2xx). Aqui tu tem acesso ao status e ao corpo da resposta:

axios.get(‘/users/1’) .then(response => { // Sucesso }) .catch(error => { if (error.response) { // O servidor respondeu com status de erro console.log(error.response.status) console.log(error.response.data) } else if (error.request) { // A requisição saiu, mas não veio resposta console.log(error.request) } else { // Erro ao montar a requisição console.log(error.message) } })

error.request aparece quando a requisição foi enviada e nenhuma resposta voltou (queda de rede, servidor fora do ar, por aí vai)

E o error.message pega o resto, tipo um erro de configuração antes mesmo de sair a requisição

Separar esses três casos é o que te deixa mostrar ‘usuário não encontrado’ numa coisa e ‘sem conexão’ na outra, em vez de um erro genérico pra tudo