Tratando erros e códigos de status
Verifique response.ok e trate falhas.
Tratando erros e códigos de status é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 3 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 JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.
A função de requisição não rejeita erros HTTP
Há uma armadilha surpreendente: a função de requisição só rejeita em caso de falhas de rede. Uma resposta 404 ou 500 ainda é resolvida com sucesso. Você precisa verificar o código de status por conta própria.
Verificando response.ok
response.ok é true somente para códigos de status na faixa de 200 a 299. Use-o para detectar erros HTTP.
const response = await fetch(url);
if (!response.ok) {
console.log("HTTP error:", response.status);
}Lendo o código de status
response.status fornece o código numérico, e response.statusText, uma mensagem curta. Use esses valores para tratar casos específicos.
if (response.status === 404) console.log("Not found");
if (response.status === 401) console.log("Unauthorized");Lançando um erro para status inválidos
Um padrão claro é lançar um erro quando a resposta não estiver correta, para que um único catch trate tanto as falhas de rede quanto as falhas HTTP.
if (!response.ok) {
throw new Error("Request failed: " + response.status);
}Envolvendo em try/catch
Com async/await, envolva todo o fluxo em try/catch. Os erros de rede rejeitam a promessa e chegam a catch; o erro HTTP que você lançou também.
try {
const res = await fetch(url);
if (!res.ok) throw new Error("Status " + res.status);
const data = await res.json();
} catch (err) {
console.log("Failed:", err.message);
}Diferenciando tipos de erro
Uma solicitação rejeitada geralmente significa que o servidor estava inacessível, que o DNS falhou ou que o CORS a bloqueou. Uma resposta incorreta significa que o servidor respondeu, mas com um erro. Quando necessário, trate esses casos de maneiras diferentes.
Lendo os corpos dos erros
As APIs geralmente retornam JSON descrevendo o erro. Leia-o antes de lançá-lo para que você possa exibir uma mensagem útil.
if (!res.ok) {
const errBody = await res.json().catch(() => ({}));
throw new Error(errBody.message || ("Status " + res.status));
}Códigos de status comuns
Conheça as categorias: 2xx indica sucesso, 3xx, redirecionamento, 4xx, erro do cliente (você enviou algo incorreto), e 5xx, erro do servidor (a falha é deles). A função de requisição segue automaticamente a maioria dos redirecionamentos.
Um auxiliar reutilizável
Centralize a verificação em um único auxiliar para que todos os pontos de chamada tenham um tratamento de erros consistente.
async function getJSON(url) {
const res = await fetch(url);
if (!res.ok) throw new Error("HTTP " + res.status);
return res.json();
}Tentando novamente após falhas temporárias
Em redes instáveis, você pode tentar novamente em caso de erros 5xx ou de rede. Mantenha o número de tentativas baixo e adicione um atraso para evitar sobrecarregar o servidor.
for (let i = 0; i < 3; i++) {
try { return await getJSON(url); }
catch (e) { if (i === 2) throw e; }
}Exibindo o erro ao usuário
Capture os erros na camada da interface para mostrar uma mensagem amigável em vez de uma tela em branco. Nunca permita que uma rejeição não tratada engula silenciosamente uma solicitação que falhou.
getJSON(url)
.then(render)
.catch(() => showToast("Could not load data"));Verificação rápida
Tratamento de erros em solicitações.
Recapitulação
A função de requisição rejeita apenas em caso de falhas de rede; por isso, sempre verifique response.ok/response.status e lance um erro para status inválidos. Envolva as chamadas em try/catch, leia os corpos dos erros em busca de mensagens, centralize a verificação em um auxiliar e exiba erros amigáveis na interface.
Perguntas Frequentes
A aula “Tratando erros e códigos de status” é grátis?
Sim — o texto completo de “Tratando erros e códigos de status” é 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 JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.
O que vou aprender em “Tratando erros e códigos de status”?
Verifique response.ok e trate falhas. Você pratica JavaScript 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 JavaScript Academy?
Nenhuma experiência prévia é necessária. JavaScript 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 4.
Quanto tempo leva a aula “Tratando erros e códigos de status”?
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 JavaScript Academy?
Sim. Cada aula de JavaScript 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
- Fazendo requisições GET
- POST e envio de dados
- Tratando erros e códigos de status
- Cancelando requisições com AbortController