Consumindo REST API com JavaScript

Este artigo é parte da série:

Criando Aplicação Completa com REST API, C#,Visual Studio e .NET Core

Todos os passos de forma simples e direta sobre como criar e publicar um REST API com .NET Core.

Funções:

Fetch(URI): Essa função merece uma aula à parte. Ela consulta um endereço e armazena a resposta em uma variável. O melor é que ela faz uma chamada assíncrona, ou seja, o programa continua funcionando normalmente enquanto ela executa em segundo plano seus procedimentos internos.

Ainda vou explicar os detalhes de funcionamento desta função tão especial do Javascript, mas por hora vou deixar um exemplo de código porque já vai ser útil para quem estiver precisando consumir uma API com JavaScript.

JSON.Parse(Conteudo): Transforma o conteúdo JSON em objeto.

Segue um exemplo consumindo a API do ViaCEP, que mostra todos os dados de um determinado CEP.

<html>
    <head>
    <title>Treino CEP</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script>
    
    // Limpa formulário
    function LimpaForm() {
            document.getElementById('rua').value=("");
            document.getElementById('bairro').value=("");
            document.getElementById('cidade').value=("");
            document.getElementById('uf').value=("");
            document.getElementById('regiao').value=("");
            document.getElementById('ddd').value=("");
            document.getElementById('ibge').value=("");
            document.getElementById('gia').value=("");
            document.getElementById('siafi').value=("");
    }

    // Consulta
    function Consulta() {
        event.preventDefault();
        var vlr = document.getElementById('cep').value;
        PesquisaCEP(vlr);
    }

    // Pesquisa CEP
    function PesquisaCEP(valor) {
        
        // Limpa Fomulário
        LimpaForm();

        
        // Extrai somente números
        var cep = valor.replace(/\D/g, '');

        // Verifica se campo cep possui valor informado
        if (cep == "" ) {
            document.getElementById('rua').value = "CEP não informado";
            return; 
        }

        //Regular expression para validar o CEP.
        var validacep = /^[0-9]{8}$/;
        if (!validacep.test(cep)) {
            document.getElementById('rua').value = "CEP inválido";
            return; 
        }

        //Realiza consulta.
        document.getElementById('rua').value="Consultado CEP...";
        var Consulta = 'https://viacep.com.br/ws/'+ cep + '/json';
        return fetch(Consulta)
            .then(objeto => objeto.text())
            .then(dados => Popula(dados));
    }

    // Popula conteúdo dos campos
    function Popula(conteudo) {
        console.log(conteudo);
        if (!conteudo.includes("erro")) {
            var obj = JSON.parse(conteudo);
            document.getElementById('cep').value    = (obj.cep);
            document.getElementById('rua').value    = (obj.logradouro);
            document.getElementById('bairro').value = (obj.bairro);
            document.getElementById('cidade').value = (obj.localidade);
            document.getElementById('uf').value     = (obj.uf);
            document.getElementById('regiao').value = (obj.regiao);
            document.getElementById('ddd').value    = (obj.ddd);
            document.getElementById('ibge').value   = (obj.ibge);
            document.getElementById('gia').value    = (obj.gia);
            document.getElementById('siafi').value  = (obj.siafi);
        } 
        else {
            limpa_formulário_cep();
            alert("CEP não encontrado.");
        }
    }
        
    </script>

    </head>

    <body>
      <form method="get" action=".">
          <table>
              <tr>
                  <td>CEP</td>
                  <td>
                      <input name="cep" type="text" id="cep" value="" size="10" 
                      maxlength="9" onblur="PesquisaCEP(this.value);" />
                  </td>
              </tr>
              <tr>
                  <td>Logradouro</td>
                  <td><input name="rua" type="text" id="rua" size="60" /></td>
              </tr>
              <tr>
                  <td>Bairro</td>
                  <td><input name="bairro" type="text" id="bairro" size="40" /></td>
              </tr>
              <tr>
                  <td>Cidade</td>
                  <td><input name="cidade" type="text" id="cidade" size="40" /></td>
              </tr>
              <tr>
                  <td>UF</td>
                  <td><input name="uf" type="text" id="uf" size="2" /></td>
              </tr>
              <tr>
                  <td>Região</td>
                  <td><input name="regiao" type="text" id="regiao" size="40" /></td>
              </tr>
              <tr>
                  <td>DDD</td>
                  <td><input name="ddd" type="text" id="ddd" size="8" /></td>
              </tr>
              <tr>
                  <td>IBGE</td>
                  <td><input name="ibge" type="text" id="ibge" size="8" /></td>
              </tr>
              <tr>
                  <td>GIA</td>
                  <td><input name="gia" type="text" id="gia" size="8" /></td>
              </tr>
              <tr>
                  <td>SIAFI</td>
                  <td><input name="siafi" type="text" id="siafi" size="8" /></td>
              </tr>
              <tr>
                  <td>&nbsp;</td>
                  <td>
                      <!-- Apenas para teste, já que PesquisaCEP é chamado automaticamente pelo onblur -->
                      <button name="cmdConsulta" id="cmdConsulta" onclick="Consulta()">Realiza Consulta de CEP</button>
                  </td>
              </tr>
          </table>
      </form>
    </body>

    </html>