Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Por que a mensagem que aparece no console às vezes é diferente quando atualizo?

Fui aplicar os métodos .then() e .catch() como na aula, e notei que na maioria das vezes a mensagem que aparece é igual a que foi mostrada na aula, mensagem de erro "Esse CEP não existe!".

Mas às vezes quando atualizo a página (talvez rápido demais?), aparece algo que acredito ser apenas o objeto de erro (?) e a mensagem de erro "Esse CEP não existe!" não aparece.

Aqui estão as linhas de código mencionadas no console:

Linha 12 -> console.log(r);

Linha 15 -> .catch(erro => console.log(erro));

Linha 16 (última linha) -> console.log(consultaCEP);

E aqui o código completo:

var consultaCEP = fetch('https://viacep.com.br/ws/01001250/json/')
    .then(r => r.json())
    .then(r => {
        if (r.erro == true) { // Se a resposta apresentou um erro (ex: CEP inexistente)
            throw Error('Esse CEP não existe!'); // 'Throw' joga o erro pro 'Catch' pegar 
        }
        else { // Se a resposta não apresentou erro
            console.log(r); // Mostra o objeto JSON (resposta) no console
        }
    }) 
    .catch(erro => console.log(erro)); // Pega o erro e o exibe na tela
console.log(consultaCEP); // Mostra a resposta no console

Consigo imaginar mais ou menos o que está acontecendo, e penso que pode ter a ver com a assincronicidade. Estou usando a extensão live server, e quando atualizo a página, o código roda normalmente e mostra a mensagem de erro pois o CEP digitado não existe (o que é esperado de acontecer). Quando atualizo novamente, talvez a promise nova não tenha rodado ainda daí ele pega a antiga (?) e como a antiga foi um erro, ele considera que a resposta foi esse erro e o exibe no console (linha 12) como sendo a resposta.

imagem ilustrando a mensagem de erro

O Navigated to... indica que eu atualizei a página.

Gostaria de mais opiniões!

2 respostas
solução!

Olá Anael, tudo bem?

O erro acontece por conta dessa linha sua de pensamento, mesmo, o comportamento que você está observando está relacionado à natureza assíncrona das chamadas fetch e às promessas (Promise).

Quando você atualiza a página rapidamente, pode ocorrer uma situação em que uma nova chamada fetch é feita antes que a anterior seja concluída. Se a nova chamada for concluída primeiro, ela atualiza o valor da variável consultaCEP, mas a promessa anterior continua sendo executada em segundo plano e, eventualmente, conclui, possivelmente gerando um erro "Esse CEP não existe!".

Em resumo, esse é o fluxo natural de execução:

  1. A chamada fetch é feita para obter os dados do CEP.
  2. O primeiro then converte a resposta em um objeto JSON.
  3. O segundo then verifica se o objeto JSON possui o campo erro como true. Se for o caso, ele lança um erro com a mensagem "Esse CEP não existe!".
  4. O catch é responsável por tratar qualquer erro que ocorra durante todo o fluxo da promessa.

Agora, quando você atualiza a página rapidamente:

  1. A chamada fetch ainda pode estar em andamento quando você atualiza a página, e a nova chamada é iniciada.
  2. A nova chamada fetch atualiza o valor da variável consultaCEP, referenciando uma nova promessa.
  3. A primeira chamada fetch conclui em segundo plano e pode disparar o erro "Esse CEP não existe!".

Isso pode ser a razão pela qual às vezes você vê o resultado esperado (uma mensagem de erro) e outras vezes só vê o objeto de erro. Devido ao comportamento assíncrono, é difícil prever qual promessa será concluída primeiro.

Parabéns pela sua observação e raciocínio sobre o motivo desse comportamento!

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Perfeito, muito obrigado :)

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software