2
respostas

Ele retorna a mesma mensagem de erro para cep inválido e inexistente

Eu queria que ao digitar um cep inválido ou inexistente os erros fossem tratados de forma diferente conforme mencionado no vídeo mas já tentei de tudo e não consigo, ele sempre retorna a mesma mensagem. Tem algo que eu possa fazer ou o problema é com a API? Segue abaixo o meu código

function consultarCEP(cep) {
    fetch(`https://viacep.com.br/ws/${cep}/json/`)
      .then(resposta => resposta.json())
      .then(r => {
        if (r.erro) {
          if (r.erro === true) {
            throw Error('CEP inexistente! Por favor digite o CEP novamente.');
          } else {
            throw Error('CEP inválido! Por favor digite um CEP válido.');
          }
        } else {
          console.log(r); // CEP válido, fazer as operações necessárias
        }
      })   
      .catch(erro => console.log(erro));
  }
2 respostas

Olá Rafaela, tudo bem?

Pelo que pude ver no seu código, você está tratando a situação de erro corretamente, porém pode ser que o problema esteja na API que você está consumindo.

Você já tentou testar com outros CEPs inválidos ou inexistentes para verificar se o problema persiste? Se sim, pode ser que a API esteja retornando sempre a mesma mensagem de erro para esses casos.

Uma sugestão seria verificar a documentação da API para ver se há alguma informação sobre o tratamento de erros ou entrar em contato com o suporte da API para obter mais informações sobre o assunto.

Espero ter ajudado e bons estudos!

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));