Tratamento de erros assíncronos em composables
try/catch em composables assíncronos, exposição do estado de erro e lógica de nova tentativa em useFetch.
Tratamento de erros assíncronos em composables é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 4 de 4. 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 4 aulas no total.
Erros em composições assíncronas
As composições que fazem buscas ou executam tarefas assíncronas precisam de sua própria estratégia de erros. O padrão é expor uma referência error para que os consumidores possam reagir, enquanto a função assíncrona captura internamente as falhas.
Expondo uma referência de erro
Retorne uma referência error junto com os dados e o estado de carregamento. Os consumidores a observam para exibir mensagens.
function useApi() {
const data = ref(null);
const error = ref(null);
return { data, error };
}try / catch em funções assíncronas
Dentro da função assíncrona, envolva as chamadas aguardadas em try/catch e armazene a falha na referência de erro, em vez de permitir que ela seja lançada sem tratamento.
async function load() {
try {
data.value = await api.get();
} catch (e) {
error.value = e;
}
}Redefinindo o estado do erro
Apague o erro anterior no início de cada tentativa, para que mensagens obsoletas não permaneçam após uma nova tentativa bem-sucedida.
async function load() {
error.value = null;
try { /* ... */ } catch (e) { error.value = e; }
}Uma referência retryCount
Para permitir novas tentativas, acompanhe as tentativas com uma referência retryCount. Incremente-a sempre que o usuário tentar novamente.
const retryCount = ref(0);
function retry() {
retryCount.value++;
load();
}Lógica de novas tentativas automáticas
Você pode tentar novamente automaticamente até um limite, aumentando o intervalo entre as tentativas. Pare assim que a contagem ultrapassar o máximo.
async function load() {
try {
data.value = await api.get();
} catch (e) {
if (retryCount.value < 3) {
retryCount.value++;
return load();
}
error.value = e;
}
}Retornando a API completa
Exponha os dados, o erro, a função de nova tentativa e retryCount, para que o componente tenha tudo de que precisa.
return { data, error, retry, retryCount };Consumindo o erro
No componente, renderize com base na referência de erro e ofereça um botão de nova tentativa conectado à função exposta.
<p v-if="error">Failed: {{ error.message }}</p>
<button v-if="error" @click="retry">Retry</button>Erro na composição versus manipulador global
O tratamento de erros no nível da composição é destinado a falhas esperadas às quais a interface deve reagir — uma solicitação malsucedida ou um erro de validação. O componente decide como apresentá-las.
Quando o limite global entra em ação
O manipulador global e os limites de erros capturam erros inesperados e não tratados — erros de programação e falhas de renderização. Eles são a rede de segurança, não o manipulador principal para falhas assíncronas previsíveis.
Escolhendo a camada certa
Regra prática: trate os erros assíncronos previstos dentro da composição com uma referência de erro; deixe os verdadeiramente inesperados subirem até o manipulador global. Assim, o feedback da interface permanece local e a proteção contra falhas é global.
Verificação rápida
Onde as falhas assíncronas esperadas, como uma busca malsucedida, devem ser tratadas?
Recapitulação
Você aprendeu que as composições assíncronas expõem uma referência error, usam try/catch em funções assíncronas, permitem novas tentativas com uma referência retryCount e uma função de nova tentativa, e que os erros no nível da composição tratam falhas esperadas, enquanto o manipulador global cobre as inesperadas.
Perguntas Frequentes
A aula “Tratamento de erros assíncronos em composables” é grátis?
Sim — o texto completo de “Tratamento de erros assíncronos em composables” é 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 4 aulas no total.
O que vou aprender em “Tratamento de erros assíncronos em composables”?
try/catch em composables assíncronos, exposição do estado de erro e lógica de nova tentativa em useFetch. 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 4 de 4.
Quanto tempo leva a aula “Tratamento de erros assíncronos em composables”?
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
- Hook de ciclo de vida onErrorCaptured
- Componentes de limite de erro
- app.config.errorHandler para erros globais
- Tratamento de erros assíncronos em composables