Requisições get com Fetch API do Javascript

Curso Escrevendo testes automatizados com PHPUnit

Existem inúmeras bibliotecas que podemos utilizar para fazer diversos tipos de requisições, dentre elas temos o jQuery Ajax e Axios. Essas bibliotecas possuem suporte aos verbos HTTP post, get, put, delete, entre outros, nos fornecendo uma melhor comunicação com serviços Restful.

Vamos estudar hoje a utilização da API Fetch, um mecanismo suportado pelos navegadores de internet moderno. Através desse mecanismo conseguimos criar requisições complexas com uso de cabeçalhos, obter respostas sem a necessidade de nenhum script adicional e de forma rápida.

Para o nosso teste, iremos utilizar a seguinte API do Github: https://api.github.com/users/satellasoft.

Nossa aplicação vai fazer uma requisição na API e retornar algumas informações que serão preenchidas em uma tabela HTML. Veja nosso HTML completo abaixo.

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GET API Fetch - SatellaSoft</title>
    <link rel="preload" href="script.js" as="script">

    <style>
        tr, td, th{
            text-align: left;
            padding-top:10px;
        }
    </style>
</head>

<body>

    <table style="width:100%;max-width:500px;margin:0 auto">
        <tr>
            <th>Image</th>
            <th>Nome</th>
            <th>Repositório</th>
            <th>Seguidores</th>
        </tr>
        <tr id="tr-register"></tr>
    </table>

    <script src="script.js"></script>
</body>

</html>

Agora que temos nosso HTML e a regra de negócio definida, podemos utilizar a função fetch do Javascript passando o endereço da nossa API como parâmetro. Veja o código abaixo.

fetch(endpoint)
    .then(response => {
        console.log(response);
    })
    .catch(error => {
        console.log(error);
    })

Linha 1 - fazemos a requisição passando o nosso endpoint;
Linha 2 - caso a requisição seja executada sem erros, então dispara uma promisse obtendo a resposta da requisição e salvando na variável response;
Linha 3 - exibimos no console a resposta da requisição;
Linha 5 - caso a requisição falhe, então capturamos o erro e exibimos na linha 6.

Até aqui temos nossa requisição sendo executada e retornando várias informações, mas a gente precisa da resposta em JSON. Vamos aprimorar nosso código e torna-lo capaz de receber o JSON e criar a partir dele as linhas da nossa tabela.

'use strict'

const endpoint = 'https://api.github.com/users/satellasoft';

fetch(endpoint)
    .then(response => {
        response.json()
            .then(
                data => {
                    setTableData(data);
            //Demais ações aqui
                })
    })
    .catch(error => {
        console.log(error);
    })

const setTableData = (data) => {
    let tr = document.querySelector('#tr-register');

    tr.innerHTML = `
        <td><img src="${data.avatar_url}" width="50" height="50"></td>
        <td>${data.name}</td>
        <td>${data.public_repos}</td>
        <td>${data.followers}</td>`;
}

Seguindo a mesma lógica e estrutura explicado no primeiro exemplo, agora submetemos o response a uma nova promisse a partir dos dados em JSON. Note que na linha 10 nós já temos a resposta em forma de objeto literal sendo passada para a função setTableData.

Dentro da função data a gente pode obter os dados e fazer os tratamentos necessários.

E assim finalizamos mais um artigo.