Tratamento de Erros e Interceptadores Globais
Trate erros de solicitações e configure interceptadores do Axios.
Tratamento de Erros e Interceptadores Globais é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 3 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 3 aulas no total.
As requisições podem falhar
As redes caem, os servidores retornam erros e os tokens expiram. Aplicativos robustos antecipam falhas e respondem de forma adequada, em vez de travar ou deixar o usuário olhando para um indicador de carregamento indefinidamente.
try/catch em torno das requisições
Envolva as requisições aguardadas em try/catch para capturar erros. O Axios lança uma exceção quando o servidor responde com um status 4xx ou 5xx.
async fetchPosts() {
try {
const res = await api.get("/posts")
this.posts = res.data
} catch (err) {
console.error(err)
}
}Inspecionando o erro
Um erro do Axios contém detalhes úteis. error.response existe quando o servidor respondeu, enquanto sua ausência geralmente indica uma falha de rede ou de tempo limite.
catch (err) {
if (err.response) {
console.log(err.response.status)
console.log(err.response.data)
} else {
console.log("Network error")
}
}Acompanhando um estado de erro
Armazene uma mensagem de erro no estado reativo para que o modelo possa exibi-la ao usuário.
data() {
return { posts: [], loading: false, error: null }
}Definindo o erro
Redefina o erro antes de cada requisição e depois preencha-o no bloco de captura.
async fetchPosts() {
this.loading = true
this.error = null
try {
this.posts = (await api.get("/posts")).data
} catch (err) {
this.error = "Could not load posts. Please try again."
} finally {
this.loading = false
}
}Exibindo mensagens de erro
Exiba o erro no modelo para que os usuários entendam o que deu errado e o que fazer em seguida.
<template>
<p v-if="loading">Loading...</p>
<p v-else-if="error" class="error">{{ error }}</p>
<ul v-else>
<li v-for="p in posts" :key="p.id">{{ p.title }}</li>
</ul>
</template>O que são interceptadores?
Os interceptadores do Axios permitem executar código automaticamente em cada requisição ou resposta. Eles são perfeitos para preocupações transversais, como anexar tokens ou lidar com erros em um único lugar central.
Interceptadores de requisição
Um interceptador de requisição é executado antes de cada requisição ser enviada. Use-o para anexar globalmente um cabeçalho de autenticação.
api.interceptors.request.use(config => {
const token = localStorage.getItem("token")
if (token) {
config.headers.Authorization = "Bearer " + token
}
return config
})Interceptadores de resposta
Um interceptador de resposta é executado depois que cada resposta chega. Ele recebe duas funções de retorno: uma para sucesso e outra para erros.
api.interceptors.response.use(
response => response,
error => {
if (error.response && error.response.status === 401) {
// redirect to login
}
return Promise.reject(error)
}
)Tratamento global de erros
Centralizar a lógica de erros em um interceptador de resposta mantém os componentes individuais limpos. Casos comuns, como 401 (encerrar sessão) ou 500 (exibir uma notificação breve), ficam em um único lugar.
api.interceptors.response.use(
res => res,
error => {
const status = error.response ? error.response.status : null
if (status === 401) logout()
if (status >= 500) showToast("Server error, try later")
return Promise.reject(error)
}
)Lógica simples de novas tentativas
Em redes instáveis, você pode repetir uma requisição com falha um número limitado de vezes antes de desistir.
async function getWithRetry(url, retries = 2) {
try {
return await api.get(url)
} catch (err) {
if (retries > 0) {
return getWithRetry(url, retries - 1)
}
throw err
}
}Verificação rápida
Avalie seus conhecimentos sobre tratamento de erros e interceptadores.
Recapitulação
Envolva as requisições em try/catch, exiba uma mensagem amigável de error na interface e inspecione error.response para distinguir falhas do servidor de falhas de rede. Os interceptadores centralizam preocupações: os interceptadores de requisição anexam tokens, os interceptadores de resposta lidam com erros globais e um pequeno auxiliar de novas tentativas acrescenta resiliência. Em seguida, você otimizará o desempenho do aplicativo.
Perguntas Frequentes
A aula “Tratamento de Erros e Interceptadores Globais” é grátis?
Sim — o texto completo de “Tratamento de Erros e Interceptadores Globais” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 3 aulas no total.
O que vou aprender em “Tratamento de Erros e Interceptadores Globais”?
Trate erros de solicitações e configure interceptadores do Axios. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Vue Academy?
Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 3.
Quanto tempo leva a aula “Tratamento de Erros e Interceptadores Globais”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Vue Academy?
Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Solicitações HTTP com Axios
- Hooks de ciclo de vida e busca de dados
- Tratamento de Erros e Interceptadores Globais