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