Rodrigo Brito

Aplicando o Fetch ao projeto prático

Para este exemplo, será utilizado o conteúdo do projeto prático. Caso queira o montar em seu ambiente de desenvolvimento, leia o conteúdo do JS-0302 - JavaScript Completo ES6 - Início do Projeto Prático.

Para baixar o projeto, clique aqui.

A seção "Números" do projeto, que apresenta dados fictícios de projetos realizados, possui seu conteúdo de forma estática, editado no código. O que será realizado é a apresentação destes dados através do Fetch, como se fossem dados importado de um site externo. Para tal, será incluído no diretório raiz do projeto um arquivo json, com os dados que serão importados através do fetch, numbers-api.json, iguais ao já existente, conforme a imagem abaixo:

Agora será criado na pasta modules do js, seguindo o padrão do projeto, o arquivo numbers-fetch, onde será desenvolvido e exportado a função, batizada de "numbersFetch" e importada no script.js:

Na função numbersFetch, inicialmente será realizado o fetch sobre o arquivo json, utilizando async e await. A primeira função, "apiFetch", ativada e tendo como parâmetro o caminho do arquivo json (que seria substituído pela url alvo) está da seguinte forma, já retornando o array formatado em json:

Agora, será necessária a criação dos elementos para a inclusão no DOM via JS. Iremos recriar a div com seu h3 e span para cada retorno do json, tendo como conteúdo os dados de cada retorno através da função createNumberDiv, chamada em um forEach dentro da função apiFetch. A div receberá a classe "numbers-skill", seguindo a mesma estrutura existente. Utilizando innerHTML e template string, o dado será incluido na div. O retorno desta função, as divs, será incluído na página através da constante numbersGrid, que é a seleção da div pai dos elementos.

Neste momento o elemento já estará presente na página dinamicamente:

Agora, é necessário retirar o conteúdo antigo e importar a ativação da animação dos números para dentro do script number-fetch, pois, como se trata de um evento assíncrono, haverá a possibilidade da animação dos números (numbersAnimation) se mantida no script principal. A ativação da função numbersAnimation ocorrerá sem problemas se estiver dentro da função apiFetch.

Os arquivos finais ficaram da seguinte forma, retirando o modules da importação de numbersAnimation pois estão no mesmo nível:

Para baixar o projeto, clique aqui.

Para visualizar o projeto, clique aqui.