E ai Rafaela blz ? Espero que sim...
Acredita que eu queria fazer EXATAMENTE o mesmo que você, e após 7 horas de tentativa e erros consegui entender.
Infelizmente Renan essa API da via CEP não tem uma documentação detalhada quanto a erro.
Então nesse caso Rafa ficaria assim:
viaCEP vai tratar 3 tipos de caso
- status 200 - ok,
ou seja, encontrou o CEP
- status.erro - true,
isso significa que o CEP tem a quantidade de caracteres válidos, no entanto não foi encontrado
- status 400 - Bad Request,
Nesse caso, o formato do CEP é inválido, seja um caracter faltando, ou uma letra no meio da requisição
Independente de onde você faça o tratamento de erros SEMPRE que ocorrer um Bad Request, ele vai ser "catcheado", (Acabei de inventar essa palavra), isso significa que ele vai ser capturado pelo método .catch()... Dessa forma temos a primeira peça do nosso quebra-cabeça.
Agora se o seu CEP for válido, não significa que ele tenha que existir, basta conter 8 caracteres apenas numéricos. Então a API retornará 2 possíveis valores:
status 200 - ok
Ouuu status.erro
que é um valor do tipo booleano, nesse caso true
Por isso podemos utiliza-lo na sintaxe if(data.erro)
E para finalizarmos existe o erro da response, infelizmente esse eu não consegui realizar o tratamento, pois requer o status 500, é quando a API esta indisponível, mas seguindo a lógica foi fácil implementar.
"Falar é fácil, mostre me o código" - Linus Torvalds
var viaCep = fetch('https://viacep.com.br/ws/01001a00/json/')
.then(response => {
if (!response.ok) {
// Lanço o erro como 500, poderia ser "pinguim"
throw new Error(500)
} else
return response.json();
})
.then(data => {
if (data.erro) {
// Lanço o erro como 404, poderia ser "maçã"
throw new Error(404);
} else
console.log(data);
})
.catch(erro => {
// Trata o conteúdo do erro para ficar apenas com o código
erro = erro.toString().replace('Error: ', '');
switch (erro) {
// Nesse caso substituiria por "maçã"
case "404":
console.log('CEP não encontrado');
break;
// Nesse caso substituiria por "pinguim"
case "500":
console.log('Erro no servidor');
break;
// E aqui pegará aquele erro Bad Request
// ou qualquer outro erro
default:
console.log('CEP invalido');
break;
}
});
Uffa, acabou, Obrigado em Senhorita Mónica pelo desafio, me ceifou 7 horas.
Testa ai me fala se deu certo.
Espero ter ajudado a esclarecer sua dúvida. Se tiver mais alguma questão, é só perguntar!
Uma ótima semana e bons estudos.
Caso este post tenha lhe ajudado, por favor, marcar como solucionado .
PS: Código refatorado
async function buscaCEP(cep) {
const $erro = document.querySelector('#erro');
try {
const response = await fetch(`https://viacep.com.br/ws/${cep}/json/`);
const data = await response.json();
if (!response.ok) {
throw new Error(500)
} else if (data.erro) {
throw new Error(404);
} else {
const $logradouro = document.querySelector('#endereco');
const $bairro = document.querySelector('#bairro');
const $localidade = document.querySelector('#cidade');
const $uf = document.querySelector('#estado');
$logradouro.value = data.logradouro;
$bairro.value = data.bairro;
$localidade.value = data.localidade;
$uf.value = data.uf;
$erro.innerHTML = '';
}
} catch (erro) {
erro = erro.toString().replace('Error: ', '');
switch (erro) {
case "404":
$erro.innerHTML = `CEP não encontrado`;
console.log('CEP não encontrado');
break;
case "500":
$erro.innerHTML = 'Erro no servidor';
console.log('Erro no servidor');
break;
default:
$erro.innerHTML = 'CEP invalido';
console.log('CEP inválido');
break;
}
}
}
const $cep = document.querySelector('#cep');
$cep.addEventListener('focusout', () => buscaCEP($cep.value));