JS-0607 - JavaScript Completo ES6 - Números Fetch

JS-0607 - JavaScript Completo ES6 - Números Fetch
Publicado em 25/04/2021 11h28
Visualizações: 447

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:

JS-0607 - JavaScript Completo ES6 - Números Fetch

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:

JS-0607 - JavaScript Completo ES6 - Números Fetch

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:

JS-0607 - JavaScript Completo ES6 - Números Fetch
JS-0607 - JavaScript Completo ES6 - Números Fetch

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.

JS-0607 - JavaScript Completo ES6 - Números Fetch

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

JS-0607 - JavaScript Completo ES6 - Números Fetch

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:

JS-0607 - JavaScript Completo ES6 - Números Fetch
JS-0607 - JavaScript Completo ES6 - Números Fetch
JS-0607 - JavaScript Completo ES6 - Números Fetch

Para baixar o projeto, clique aqui.

Para visualizar o projeto, clique aqui.

Veja também:

Confira mais artigos relacionados

Este website utiliza cookies próprios e de terceiros a fim de personalizar o conteúdo, melhorar a experiência do usuário, fornecer funções de mídias sociais e analisar o tráfego. Para continuar navegando você deve concordar com nossa Política de Privacidade

Sim, eu aceito. Não, eu não aceito.