Desenvolvedor de Software e Especialista em Tecnologia da Informação

Como consumir APIs com JavaScript Moderno: Projeto completo com Fetch API, Async/Await e manipulação de DOM 🚀

Você já percebeu que alguns pequenos trechos de código acabam se tornando verdadeiros itens salva-vidas durante o desenvolvimento? Neste artigo, vamos construir um projeto completo utilizando JavaScript moderno para consumir informações externas, percorrer uma lista de dados e gerar todo o conteúdo diretamente no HTML. Uma habilidade essencial para qualquer desenvolvedor Front-End ou Full Stack.

📅  10 de junho de 2026
⏱️  12 min
🏷️  Javascript
📚 artigos +

Itens salva-vidas com Javascript ⛑️

Um projeto que construímos totalmente funcional utilizando JavaScript moderno para consumir informações externas, percorrer uma lista de dados e gerar todo o conteúdo diretamente no HTML. Embora o exemplo utilize um feed de notícias do Globo Esporte, o conceito apresentado pode ser aplicado em praticamente qualquer sistema que consuma APIs REST, JSON ou serviços externos. É exatamente esse tipo de conhecimento que diferencia um desenvolvedor iniciante de alguém que começa a construir projetos reais.

JavaScript Moderno Fetch API Async Await Promises DOM API REST Frontend Desenvolvimento Web Template Literals Regex RogerioPontesTI

"A diferença entre um desenvolvedor iniciante e um profissional não está em saber decorar sintaxe, mas em saber combinar ferramentas para resolver problemas reais. Consumir APIs é uma dessas habilidades que transformam código em soluções."

O que é Fetch API e por que usá-la?

A Fetch API é uma interface nativa do JavaScript que permite fazer requisições HTTP de forma assíncrona. Ela substitui o antigo XMLHttpRequest e oferece uma sintaxe mais moderna e poderosa para consumir dados de APIs e serviços externos.

Principais vantagens da Fetch API:

  • Nativa: Não requer bibliotecas externas
  • Baseada em Promises: Código mais limpo e organizado
  • Suporte a JSON: Facilidade para trabalhar com dados
  • Controle total: Headers, métodos HTTP, body, etc.
  • Async/Await: Sintaxe síncrona para operações assíncronas

💡 Dica: A Fetch API é suportada por todos os navegadores modernos e é a forma recomendada para fazer requisições HTTP em JavaScript.

Estrutura do projeto

Nosso projeto vai consumir o feed de notícias do Globo Esporte e exibir as notícias em uma lista estilizada com Bootstrap. A estrutura é simples:

ESTRUTURA DE ARQUIVOS 

/projeto-feedge
    index.html
    main.js
    README.md

O HTML - Estrutura base

O arquivo HTML é simples, com uma estrutura que utiliza Bootstrap para estilização:

HTML 

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Feed Globo Esporte</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet">
    <script src="main.js" defer></script>
</head>
<body class="bg-light">

    <div class="container py-5">

        <h1 class="text-success mb-4">
            📰 Últimas Notícias - Globo Esporte
        </h1>

        <div id="feed-lista" class="list-group shadow-sm">

            <!-- Conteúdo gerado pelo JavaScript -->

        </div>

    </div>

</body>
</html>

O JavaScript - Consumindo a API

A parte mais importante do projeto é o JavaScript, que faz a requisição, processa os dados e gera o HTML dinamicamente:

JAVASCRIPT COMPLETO 

// URL do feed RSS do Globo Esporte
const URL_FEED = "https://ge.globo.com/rss/ge";

// URL da API que converte RSS para JSON
const URL_API = `https://api.rss2json.com/v1/api.json?rss_url=${encodeURIComponent(URL_FEED)}`;

// Função principal para carregar o feed
async function carregarFeed() {

    try {

        // Faz a requisição para a API
        const RESPOSTA = await fetch(URL_API);
        const DADOS = await RESPOSTA.json();
        const LISTA = document.getElementById("feed-lista");

        // Limpa o container
        LISTA.innerHTML = "";

        // Percorre cada item do feed
        DADOS.items.forEach(item => {

            // Formata a data
            const data = new Date(item.pubDate);
            const dataFormatada = new Intl.DateTimeFormat("pt-BR", {
                dateStyle: "short",
                timeStyle: "short"
            }).format(data);

            // Extrai a imagem da notícia
            const imagem =
                item.thumbnail ||
                item.description.match(/)?.[1] ||
                "https://via.placeholder.com/140x90?text=GE";

            // Cria o elemento da notícia
            const noticia = document.createElement("a");
            noticia.href = item.link;
            noticia.target = "_blank";
            noticia.className = "list-group-item list-group-item-action";

            // Define o conteúdo HTML da notícia usando Template Literal
            noticia.innerHTML = `
                <div class="row">
                    <div class="col-md-3 col-lg-2">
                        <img
                            src="${imagem}"
                            class="img-fluid rounded"
                            style="width:100%;height:100px;object-fit:cover;"
                            alt="${item.title}">
                    </div>

                    <div class="col-md-9 col-lg-10">
                        <h5 class="mb-2 text-dark">
                            ${item.title}
                        </h5>

                        <small class="text-muted">
                            🕒 ${dataFormatada}
                        </small>

                        <p class="mt-2 text-secondary">
                            ${item.description
                                .replace(/<[^>]+>/g, "")
                                .substring(0, 160)}...
                        </p>
                    </div>
                </div>
            `;

            // Adiciona a notícia à lista
            LISTA.appendChild(noticia);
        });

    } catch (erro) {
        console.error(erro);
        document.getElementById("feed-lista").innerHTML = `
            <div class="alert alert-danger">
                Não foi possível carregar as notícias.
            </div>
        `;
    }
}

// Executa a função
carregarFeed();

Explicando o código passo a passo

1. Fetch API e Async/Await

FETCH API 

const RESPOSTA = await fetch(URL_API);
const DADOS = await RESPOSTA.json();
  • fetch(): Faz a requisição HTTP para a URL
  • await: Aguarda a resposta da requisição
  • response.json(): Converte a resposta para JSON
  • Async/Await: Torna o código assíncrono mais legível

2. Loop forEach

FOREACH 

DADOS.items.forEach(item => {
    // Processa cada notícia
});
  • forEach(): Método para iterar sobre arrays
  • item: Representa cada notícia do feed
  • Função arrow: Sintaxe concisa para callbacks

3. Manipulação do DOM

DOM MANIPULATION 

const noticia = document.createElement("a");
noticia.href = item.link;
noticia.className = "list-group-item list-group-item-action";
noticia.innerHTML = `...`;
LISTA.appendChild(noticia);
  • createElement(): Cria um novo elemento HTML
  • appendChild(): Adiciona o elemento ao DOM
  • innerHTML: Define o conteúdo HTML
  • className: Define as classes CSS

4. Template Literals

TEMPLATE LITERALS 

noticia.innerHTML = `
    <h5 class="mb-2 text-dark">
        ${item.title}
    </h5>
`;
  • `...`: Template literal com crases
  • ${}: Interpolação de variáveis
  • Multi-linha: Facilita a escrita de HTML

5. Expressões Regulares (Regex)

REGEX 

const imagem =
    item.description.match(/)?.[1] ||
    "https://via.placeholder.com/140x90?text=GE";
  • .match(): Busca padrões em strings
  • ?.[1]: Optional chaining para acesso seguro
  • ||: Fallback para imagem padrão

6. Formatação de datas

FORMATAÇÃO DE DATAS 

const dataFormatada = new Intl.DateTimeFormat("pt-BR", {
    dateStyle: "short",
    timeStyle: "short"
}).format(new Date(item.pubDate));
  • Intl.DateTimeFormat: API nativa para formatação
  • dateStyle: "short": Formato de data curto (dd/mm/yyyy)
  • timeStyle: "short": Formato de hora curto (HH:mm)

Resultado final no navegador

Ao executar o projeto, o resultado é uma lista de notícias do Globo Esporte, com título, imagem, data/hora e um resumo do conteúdo, tudo estilizado com Bootstrap.

RESULTADO 

📰 Últimas Notícias - Globo Esporte

┌──────────────────────────────────────────────────────┐
│ [Imagem]  Título da Notícia                       
│           🕒 15/01/2024 14:30                         
│           Resumo da notícia com até 160...        
├──────────────────────────────────────────────────────┤
│ [Imagem]  Título da Notícia 2                     
│           🕒 15/01/2024 14:15                     
│           Resumo da notícia com até 160...        
└──────────────────────────────────────────────────────┘

Benefícios e aplicações práticas

📱 Aplicações práticas
  • Dashboards de dados
  • Agregadores de conteúdo
  • Ferramentas de monitoramento
  • Aplicações em tempo real
🎯 Habilidades desenvolvidas
  • Consumo de APIs REST
  • Manipulação de DOM
  • JavaScript Assíncrono
  • Tratamento de erros

Conclusão

Consumir APIs com JavaScript moderno é uma habilidade essencial para qualquer desenvolvedor Front-End ou Full Stack. O projeto que construímos neste artigo demonstra como combinar diversas ferramentas do JavaScript para criar uma aplicação funcional e profissional.

Neste artigo, você aprendeu:

  • ✅ Como usar a Fetch API para fazer requisições HTTP
  • ✅ Como trabalhar com Async/Await e Promises
  • ✅ Como manipular o DOM dinamicamente
  • ✅ Como usar Template Literals para gerar HTML
  • ✅ Como usar Expressões Regulares (Regex) para extrair dados
  • ✅ Como formatar datas com Intl.DateTimeFormat
  • ✅ Como tratar erros de forma elegante

💡 Lembre-se: O JavaScript moderno oferece ferramentas poderosas para consumir APIs e criar aplicações dinâmicas. Dominar esses conceitos é fundamental para se destacar como desenvolvedor web.

📂 Código Fonte

Todo o código utilizado neste vídeo está disponível no GitHub para você baixar, testar e modificar:

GitHub - feedge

🤔 O que você achou?

💬 Quer aprender JavaScript do ZERO? Comece agora a escrever seu primeiro código e seus fundamentos!

❓ FAQ: Perguntas Frequentes sobre JavaScript e Consumo de APIs

É a API nativa do JavaScript utilizada para consumir dados de serviços externos. Ela substitui o antigo XMLHttpRequest e oferece uma sintaxe mais moderna e poderosa.

É uma forma moderna de trabalhar com operações assíncronas deixando o código mais organizado e legível. Async/Await torna o código assíncrono parecido com código síncrono.

Não. O próprio JavaScript já possui o Fetch API nativamente. Bibliotecas como Axios são opcionais e podem ser usadas para funcionalidades adicionais ou sintaxe diferente.

Não. O conceito pode ser adaptado para qualquer API REST ou JSON. Basta mudar a URL e ajustar o tratamento dos dados conforme a estrutura da resposta.

Sim. Todo o projeto está publicado gratuitamente no GitHub no repositório oficial: https://github.com/rogeriopontesti/feedge

Sim. Ele reúne vários conceitos fundamentais em um único exemplo prático: Fetch API, Async/Await, Promises, manipulação do DOM, Template Literals, Regex e formatação de datas. É perfeito para consolidar o conhecimento.

A Fetch API é mais moderna, baseada em Promises e mais fácil de usar. XMLHttpRequest é mais antigo, com sintaxe mais verbosa e callback-based. Fetch é a recomendação atual para novas aplicações.

Use try/catch com Async/Await ou .catch() com Promises. A Fetch API não rejeita promessas em erros HTTP (ex: 404), então é importante verificar response.ok e lançar erros manualmente.

🎬 Assista ao Vídeos completo sobre Refatoração

O vídeo foi feito em Javascript mais o conceito pode ser utilizado em qualquer outra linguagem de programação..

🔗 Conecte-se Comigo

YouTube Site LinkedIn GitHub Instagram

💬 Qual recurso do JavaScript mais salvou você durante um projeto? Foi o Fetch API, Async/Await, Promises, Regex ou algum outro? Escreva aqui nos comentários! 👇

#JavaScript #FetchAPI #AsyncAwait #Promises #DOM #Frontend #Programação #DesenvolvimentoWeb #API #Bootstrap #Regex #Shorts #RogerioPontesTI