Começando com fetch no Javascript

Porém, pode ser que alguns dos campos seja digitado de maneira incorreta resultando em um endereço errado. Sendo assim teremos problemas na validação, finalização da compra e o descontentamento do cliente em relação a loja pois não conseguiu efetuar a finalização da compra.

Automatizando

Para automatizar o preenchimento iremos usar o Javascript, vamos primeiro ver como o HTML está definindo e pegar o atributo do button pelo Javascript.

No Javascript vai ficar assim:

Com isto feito, adicionamos um evento de click do botão usando arrow function:

Vamos implementar algumas coisas dentro dessa função, primeiro event.preventDefault, responsável por cancelar o comportamento natural do botão que seria uma submissão para o servidor.

Com o comportamento natural do botão cancelado, iremos implementar a busca do CEP e pegar o valor que está contido no campo do CEP.

Após ter feito isto, vamos começar a trabalhar com a API do Viacep e utilizar o fetch pela URL para fazer uma requisição. Se ela for achada, vamos fazer uma função retornando a resposta em json.

O fetch devolve uma promessa de que algo será retornado, essa promessa é chamada de Promisse. Essa promessa pode tanto ser boa, ter retornado os dados, quanto ter falhado por algum motivo - como no caso da conexão com o servidor cair.

Para ambas as situações precisamos fazer um tratamento. No caso, só vou tratar no caso de sucesso. Por isso, se for um sucesso, então (then) vamos pegar a resposta com as informações do CEP:

Com o retorno da data (dados) vamos atribuir ele para os campos e fazer uma função pegar o id do campos e atribuir os valores para eles:

E dentro do evento de click do btnPesquisarCEP iremos atribuir a função:

Mas como sabemos, o CEP pode ser digitado de maneira errada, então vamos fazer uma exceção que mostre para a pessoa que foi um CEP incorreto ou inexistente.

Para isso criamos um alert dentro do then para mostrar que o CEP está inválido.

Conclusão

Neste post, aprendemos como fazer uma requisição web com Javascript vendo como são úteis e como elas facilita a vida de quem desenvolve. E normalmente no dia a dia, os sistemas se comunicarem com outros por requições.

Se gostou do conteúdo, que tal dar uma olhada na nossa formação front-end na Alura ou em nossos livros na Casa do Código.