Como conectar na ViaCPE com JavaScript?

Este é um artigo rápido e prático que mostra que conectar-se ao ViaCEP usando JavaScript. O processo em si é simples, você pode fazer uma requisição HTTP GET para a API do ViaCEP com o CEP desejado e manipular a resposta retornada para obter os dados desejados.

Usando métodos encadeados

Você pode fazer isso usando a função fetch() do JavaScript ou outras bibliotecas de requisições HTTP como o Axios. Veja um exemplo usando a função fetch():

const cep = '01001000';
const url = `https://viacep.com.br/ws/${cep}/json/`;

fetch(url)
  .then(response => response.json())
  .then(data => {
    console.log(data);
    // Faça a manipulação dos dados retornados aqui
  })
  .catch(error => console.log(error));

Nesse exemplo, uma requisição HTTP GET é feita para a URL do ViaCEP com o CEP desejado inserido na URL. A resposta da API é convertida para o formato JSON usando o método json() e, em seguida, é possível manipular os dados retornados como um objeto JavaScript.

Lembre-se de tratar os erros que podem ocorrer durante a requisição HTTP e de ajustar a forma como os dados serão manipulados de acordo com a sua necessidade.

Usando Async/await

O async/await é uma forma mais moderna e simplificada de trabalhar com Promises, que são utilizadas nas requisições HTTP. Com o async/await, o código fica mais legível e fácil de entender.

Veja um exemplo de como buscar os dados do ViaCEP utilizando async/await:

async function getCEPData(cep) {
  try {
    const url = `https://viacep.com.br/ws/${cep}/json/`;
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
    // Faça a manipulação dos dados retornados aqui
  } catch (error) {
    console.log(error);
  }
}

getCEPData('01001000');

Nesse exemplo, a função getCEPData é definida como assíncrona com a palavra-chave async. Dentro da função, é criada a URL da API do ViaCEP com o CEP desejado e, em seguida, é feita a requisição HTTP GET utilizando o fetch. O await é utilizado para aguardar a resposta da API e a conversão da resposta para JSON. Em seguida, é possível manipular os dados retornados como um objeto JavaScript.

Lembre-se de utilizar a estrutura try/catch para tratar os erros que podem ocorrer durante a requisição HTTP.