Javascript Fetch

Javascript fetch – Consumindo um WebService

Agora que nós já aprendemos a utilizar a API do Javascript Fetch, nós já estamos aptos para interagir com um WebService. Para este exemplo, vamos alterar o código que fizemos preparando uma aplicação para utilizar um banco de dados. Dá uma olhada neste vídeo.

Loopback

Vamos começar por nossa API. Escolhi utilizar o Loopback para criar a API por ser uma ferramenta rápida e facil de utilizar, esta API será a responsável por realizar as transações em nosso banco de dados. O loopback é uma ferramenta especializada em criar API’s sem a necessidade de codificar, isso agiliza muito no desenvolvimento. Além disso, ele possui uma ferramenta de documentação de API chamada Swagger, que vai nos ajudar a testar as URL’s que vamos fazer a requisições.

Não vou cobrir a instalação do Loopback neste artigo. A Instalação está bem explicada no próprio site da ferramenta, https://loopback.io

Criando a API

Para criar a API vamos abrir um terminal, ou shell no windows e rodar o seguinte comando:

lb meu-projeto

Ao rodar este comando você irá criar um projeto limpo. A CLI vai te fazer algumas perguntas, você pode apertar enter para todas elas. Terminado o script de instalação, você pode entrar na pasta.

cd meu-projeto

lb model Pessoa

O primeiro comando vai navegar até a pasta do seu projeto, enquanto que o segundo, vai criar um modelo. Este modelo vai representar uma tabela no nosso banco de dados. Para este exemplo, vamos armazenar os dados em memória para economizar tempo, ou seja, se você parar a sua aplicação loopback, você vai perder os seus dados.

O comando lb model vai lhe fazer algumas perguntas, você vai seguir apertando Enter até que ele te faça a seguinte pergunta: ? Property name:

Quando chegarmos neste passo, vamos criar as colunas da nossa tabela, ou os campos que representam o nosso objeto tipo Pessoa.

Property name Property TypeRequiredDefault Value [leave blank for none]
idnumberyes
nomestringyes

Quando você terminar de criar as suas propriedades, deixe o nome da propriedade em branco e aperte enter para encerrar a criação do modelo.

Rodando o LoopBack

Agora é só rodar o seguinte comando para inicializar a aplicação do loopback.

node .

Este comando vai iniciar a sua aplicação na porta 3000 e vai te disponibilizar uma interface gráfica para gerenciar a sua API. Acesse o seguinte link no seu navegador: localhost:3000/explorer/

Clique no nome Pessoa. Isso vai fazer com que todos os pontos de acesso da sua API, ou end-points, sejam apresentados para você.

Criando uma Pessoa

Vamos criar uma Pessoa. Clique na linha do POST /Pessoas

javascript fetch

O primeiro passo é clicar no quadrado amarelo para copiar o modelo para a caixa de texto data. Não se preocupe, ele copia automaticamente para você. Depois, altere a string para o nome que você deseja inserir. Clique então no botão ‘Try it out!’ para inserir o registro na sua base de dados. Fácil, não é mesmo?

Repita estes passos mais 2 vezes inserindo nomes diferentes para termos mais de um registro armazenado.

Recolha a aba POST /Pessoas e abra a aba GET /Pessoas. Este método vai nos permitir buscar todas as pessoas armazenadas. Apenas clique no botão ‘Try it out!’ que você vai ver todos os registros que você inseriu.

javascript fetch

Deletando uma Pessoa

Se eu quiser deletar algum registro, basta utilizar a Aba DELETE /Pessoas/{id}. Informe o id da pessoa que você quer deletar e pressione o botão ‘Try it out!’, caso o id exista, ele vai remover a pessoa e retornar um count com o número de pessoas removidas.

javascript fetch

Atualizando uma Pessoa

Para atualizar o registro, vamos utilizar a Aba PUT /Pessoas. O princípio é o mesmo do POST, exceto pelo fato que passamos o id da pessoa no campo de texto para identificar a pessoa que estamos atualizando. Neste exemplo, estamos atualizando a pessoa com id 1.

javascript fetch

Se você fizer uma busca na Aba GET /Pessoas, você vai perceber que a pessoa realmente foi atualizada.

Usando o Fetch e o Loopback

Agora que você já sabe utilizar o loopback e a API Fetch, nós vamos integrar os dois. Nós vamos utilizar a Request URL que o loopback retorna quando utilizamos o ‘Try it out!’

javascript fetch

Vamos alterar os métodos que nós criamos anteriormente dentro do arquivo storage.js. Se você não tem este métodos, dá uma olhada Nesse Vídeo que eu mostro o passo à passo de como eu fiz o código. Antes de mais nada, vou criar uma variável dentro da função principal para especificar a URL base do loopback.

function StorageService(origin)
{
    const BASE_URL = 'http://localhost:3000/api/';
// Mais codigo para baixo.....
}

Javascript Fetch – GET

Esta URL vai ser a base para todas as chamadas. Se você lembra bem, nosso método recebe uma variável origin. Será esta a variável que vai informar qual Modelo vamos acessar, o legal é que vamos poder utilizar este código para qualquer Modelo do Loopback.

O primeiro método que vamos alterar será o get().

const get = function ()
{
    return fetch(`${BASE_URL}${origin}`);
}

No nosso arquivo main.js, vamos atualizar o método getClientes().

function getClientes()
{

    // Chama metodo para buscar todos os registros.
    storageService.get().then(function (response)
    {

        // Converte resposta para JSON
        response.json().then(function (dados)
        {
            // Se a resposta retornar com sucesso
            if (response.status == 200) {
                console.table(dados);

            } else {
                // Apresenta o erro.
                console.error(dados);
            }
        });

    }).catch(function (error)
    {
        // Caso tenha algum erro nao tratado, loga o erro.
        console.error(error);

    });
}

Nossa função para buscar as Pessoas está pronta. Se você quiser testar, basta abrir o arquivo index.html no seu navegador e clicar no botão ‘Buscar Todos’. Isso vai fazer com que os dados sejam impressos no console do navegador.

Javascript Fetch – DELETE

O próximo método que nós vamos alterar será o remove() no nosso arquivo storage.js. Mas antes disso, precisamos configurar um objeto definindo os Headers que vamos utilizar em nossas chamadas.

function StorageService(origin)
{
    const BASE_URL = 'http://localhost:3000/api/';
    // Novo HEADER para fazer a chamada HTTP
    const HEADERS = {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    };
    // Mais codigo para baixo....
}

Estamos dizendo em nosso header que aceitamos JSON e Enviamos JSON para o loopback. Definidos os Headers, podemos fazer a nossa chamada.

const remove = function (id)
{
    return fetch(`${BASE_URL}${origin}/${id}`, {
        method: 'DELETE',
        headers: HEADERS
    });

    // Resultado de exemplo da URL > http://localhost:3000/api/Pessoas/3
}

Nesta chamada estamos utilizando os headers que definimos anteriormente e estamos passando um parâmetro id ao final da URL. Da mesma forma, estamos definindo o Método que queremos utilizar, neste caso o DELETE.

Para o nosso arquivo main.js, vamos copiar o código que escrevemos do getClientes e vamos alterar apenas o método que o storageService chama para remove(id).

function removeCliente(id)
{
    id = 10;
    // Chama metodo para remover um registro
    storageService.remove(id).then(function (response)
    {

        // Converte resposta para JSON
        response.json().then(function (dados)
        {
            // Se a resposta retornar com sucesso
            if (response.status == 200) {
                console.log(dados);

            } else {
                // Apresenta o erro.
                console.error(dados);
            }
        });

    }).catch(function (error)
    {
        // Caso tenha algum erro nao tratado, loga o erro.
        console.error(error);

    });
}

Javascript Fetch – POST

Vamos alterar o nosso método save() em nosso arquivo storage.js.

const save = function (dados)
{
    return fetch(`${BASE_URL}${origin}`, {
        method: 'POST', // Metodo da chamada.
        body: JSON.stringify(dados), // Converte os dados para string.
        headers: HEADERS
    });

}

Nesta função, precisamos alterar o Method para POST e converter o body para JSON.stringify(). Já no nosso arquivo main.js, vamos mais uma vez copiar o código de uma das funções que já criamos e apenas alterar a chamada da função do storageService para save() passando o parâmetro que nós já haviamos criado.

function seed()
{
    var dados = Array.from({ length: 10 }, function (map, index)
    {
        var id = index + 1;
        return {
            nome: "Cliente " + id
        };
    });

    // Chama metodo para salvar todos os registros.
    storageService.save(dados).then(function (response)
    {

        // Converte resposta para JSON
        response.json().then(function (dados)
        {
            // Se a resposta retornar com sucesso
            if (response.status == 200) {
                console.table(dados);

            } else {
                // Apresenta o erro.
                console.error(dados);
            }
        });

    }).catch(function (error)
    {
        // Caso tenha algum erro nao tratado, loga o erro.
        console.error(error);

    });
}

Tenha em mente que desta forma você vai adicionar novos dados à sua base de dados, diferente do localStorage que estavamos utilizando antes, sendo assim, aqui você está adicionando mais dados e não sobreescrevendo os que já existiam. Se você quiser limpar todos os dados, basta pausar o loopback no seu terminal: Ctrl + C. Ao iniciar a aplicação novamente não haverá mais dados salvos.

Javascript Fetch – PUT

Por fim, vamos alterar a função update() em nosso arquivo storage.js.

const update = function (dados)
{
    return fetch(`${BASE_URL}${origin}`, {
        method: 'PUT',
        body: JSON.stringify(dados),
        headers: HEADERS
    });
}

Você pode copiar o conteúdo da função save() e apenas mudar o method para PUT. No arquivo main.js, vamos alterar a função update(), copie mais uma vez o conteúdo de outra função e altere a chamada da função do storageService para update().

function updateCliente()
{
    var novo = {
        id: 7,
        nome: 'João'
    };

    // Chama metodo para alterar um registro
    storageService.update(novo).then(function (response)
    {

        // Converte resposta para JSON
        response.json().then(function (dados)
        {
            // Se a resposta retornar com sucesso
            if (response.status == 200) {
                console.log(dados);

            } else {
                // Apresenta o erro.
                console.error(dados);
            }
        });

    }).catch(function (error)
    {
        // Caso tenha algum erro nao tratado, loga o erro.
        console.error(error);

    });
}

Está pronto, mudamos todos as nossas funções para utilizar o loopback.

Coclusão

Criar uma camada para gerenciar requisições à uma API é uma boa prática que vai te ajudar na manutenção e organização do seu código. Esta camada te permite ser transparente nas suas chamadas à API’s, independente da sua regra de negócio. Além disso, vimos que é realmente muito fácil criar uma API com o Loopback. Sua agilidade e praticidade de implementação são incomparáveis. Em nosso próximo artigo, vou lhe ensinar a conectar o Loopback à um banco de dados MySQL, assim você não vai perder dados ao encerrar a aplicação. Fique ligado nas notificações!

Leave a comment

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Copyright © – Jonatan Pietroski