Ex1-cep-fetch
A função buscaEndereco()
recebe um parâmetro cep
, que é usado
para construir uma URL para buscar os detalhes do endereço no servidor. Depois que a
solicitação é feita, a função verifica se a resposta é ok e, em seguida, analisa os dados
usando o método .json()
. Se houver um erro, a função redefinirá o formulário e
registrará o erro no console.
Ex3-cep-await
A função buscaEndereco()
neste exemplo também recebe um parâmetro
cep
. No entanto, neste caso, a função usa a palavra-chave await
para aguardar a resposta do servidor. Se houver um erro na resposta, a função registrará o
erro no console e retornará. Se a resposta estiver ok, a função analisará os dados usando o
método .json()
, e depois atualizará o formulário com os detalhes do endereço.
Resumo
Em geral, ambas as funções realizam a mesma tarefa de buscar detalhes de endereço com
base em um CEP fornecido. No entanto, Ex3-cep-await usa a sintaxe mais recente
await
, o que pode tornar o código mais fácil de ler e entender.
(também está comentado no próprio código)
async function buscaEndereco(cep) { // Verifica se o comprimento do CEP é diferente de 9 caracteres e retorna se for o caso (não faz nada) if (cep.length != 9) return; // Tenta executar o código abaixo e, em caso de erro, imprime o erro no console e retorna try { // Faz uma chamada assíncrona à função fetch para buscar o endereço com base no CEP fornecido. // O await aguarda a resposta da requisição antes de prosseguir para a próxima linha de código. let response = await fetch("busca-endereco.php?cep=" + cep); // Verifica se a resposta não é OK e lança um erro com a mensagem de status da resposta if (!response.ok) throw new Error(response.statusText); // Aguarda a conversão (novamente por meio do await) da resposta em formato JSON e o seu resultado // é armazenado na variável endereco. var endereco = await response.json(); } catch (e) { // Em caso de erro, imprime o erro no console e retorna console.error(e); return; } // Obtém o formulário pelo seletor "form" let form = document.querySelector("form"); // Preenche os campos do formulário com os valores do endereço obtido na resposta form.rua.value = endereco.rua; form.bairro.value = endereco.bairro; form.cidade.value = endereco.cidade; }