Consumo de APIs com JavaScript: guia prático para iniciantes

Compartilhe:

Desenvolvimento Frontend, Desenvolvimento Fullstack

Depois de entender o que é uma API REST e como funcionam as requisições HTTP, chegou a hora de colocar a mão na massa e aprender como consumir API com JavaScript.

Esse conhecimento é essencial para qualquer dev que deseja criar aplicações web interativas, conectadas a bancos de dados e com informações dinâmicas em tempo real.

Neste artigo, você vai aprender:

Como usar o fetch() para consumir APIs
Como tratar a resposta da requisição em JSON
Como lidar com erros e status HTTP
Exemplo prático com uma API pública

O que significa consumir API com JavaScript?

Consumir uma API significa fazer uma requisição HTTP para um servidor remoto e obter uma resposta com dados estruturados — geralmente em JSON. No JavaScript moderno, a forma mais comum de fazer isso é utilizando a função fetch().

Essa interação é o que permite que aplicações web carreguem informações dinâmicas sem recarregar a página, como exibir os produtos de uma loja, mostrar posts de um blog ou consultar dados de clima em tempo real.

Além disso, consumir APIs permite que o front-end se mantenha leve e desacoplado da lógica do back-end, favorecendo aplicações mais escaláveis. Ao concentrar a responsabilidade de fornecer os dados na API, o JavaScript pode se dedicar a apresentar essas informações de forma dinâmica e responsiva.

Com essa abordagem, também é possível integrar diferentes fontes de dados em uma única interface — como uma dashboard que combina estatísticas de usuários, notificações em tempo real e atualizações de sistema, todas vindas de APIs distintas.

Exemplo Prático: Blog de Programador

Imagine que você está criando um blog sobre programação e quer exibir automaticamente os últimos posts publicados por outros desenvolvedores. Para isso, você decide consumir uma API pública que retorna artigos com título, autor e data de publicação.

Essa API será acessada via JavaScript, e os dados serão exibidos diretamente na interface do seu site, sem precisar atualizar a página.

📦 Exemplo de retorno da API:

{
  "id": 42,
  "titulo": "Como usar JavaScript para consumir APIs",
  "autor": "Diogo Pé",
  "data": "2025-05-01T14:30:00Z"
}

Esse retorno simula a resposta de uma API REST que fornece posts de blog, com campos como titulo, autor e data. Com esse tipo de dado estruturado, conseguimos exibir automaticamente os conteúdos mais recentes no seu site.

Consumo da API do Blog com JavaScript

Agora que já temos o formato de resposta da API simulada, vamos ao código que irá consumi-la e exibir os dados na página. Usaremos a função fetch() para buscar os dados e o DOM para renderizá-los dinamicamente no HTML.

Imagine que a API está disponível em https://api.blogprogramador.dev/posts/42. Abaixo está uma forma organizada e mais próxima da realidade de um projeto profissional:

<div id="post"></div>

<script>
  // Função responsável por buscar o post da API
  function buscarPost(id) {
    return fetch(`https://api.blogprogramador.dev/posts/${id}`)
      .then(response => {
        if (!response.ok) {
          throw new Error('Erro ao buscar o post');
        }
        return response.json();
      });
  }

  // Função responsável por renderizar o conteúdo na tela
  function renderizarPost(post) {
    const container = document.getElementById('post');
    container.innerHTML = `
      <h2>${post.titulo}</h2>
      <p><strong>Autor:</strong> ${post.autor}</p>
      <p><strong>Publicado em:</strong> ${new Date(post.data).toLocaleDateString()}</p>
    `;
  }

  // Função principal para orquestrar o fluxo
  function carregarPost(id) {
    buscarPost(id)
      .then(renderizarPost)
      .catch(erro => console.error('Erro na requisição:', erro));
  }

  // Inicia o carregamento com o ID 42
  carregarPost(42);
</script>

Cada função tem uma responsabilidade clara: buscarPost() faz a requisição, renderizarPost() lida com o DOM e carregarPost() organiza o fluxo. Essa estrutura é comum em times de desenvolvimento para garantir organização e escalabilidade no código.

Tratando erros e status HTTP

Toda resposta de uma API inclui um código de status. No exemplo acima, usamos response.ok para verificar se a resposta foi bem-sucedida (códigos 200 a 299).

Se a API retornar um erro (como 404 ou 500), é importante tratá-lo adequadamente para evitar falhas na interface ou mensagens confusas ao usuário.

Você também pode acessar o response.status diretamente para tratar diferentes situações de forma personalizada.

📌 Exemplo de tratamento de erro: Imagine que a API esteja fora do ar ou o ID do post não exista. Podemos exibir uma mensagem amigável ao usuário, em vez de apenas mostrar o erro no console:

function carregarPost(id) {
  buscarPost(id)
    .then(renderizarPost)
    .catch(erro => {
      const container = document.getElementById('post');
      container.innerHTML = `<p style="color: red;">Erro ao carregar o post. Tente novamente mais tarde.</p>`;
      console.error('Erro na requisição:', erro);
    });
}

Esse exemplo melhora a experiência do usuário, fornecendo um feedback visual quando algo dá errado, algo essencial em aplicações reais.

Como exibir os dados na tela

Para completar o exemplo do Blog do Programador, veja como ficaria a estrutura HTML de uma página real chamando a função carregarPost() e exibindo o conteúdo de um artigo:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Blog do Programador</title>
</head>
<body>
  <main>
    <section>
      <h1>Último artigo publicado</h1>
      <div id="post"></div>
    </section>
  </main>

  <script>
    // Funções buscarPost, renderizarPost e carregarPost definidas aqui
    function buscarPost(id) {
      return fetch(`https://api.blogprogramador.dev/posts/${id}`)
        .then(response => {
          if (!response.ok) {
            throw new Error('Erro ao buscar o post');
          }
          return response.json();
        });
    }

    function renderizarPost(post) {
      const container = document.getElementById('post');
      container.innerHTML = `
        <h2>${post.titulo}</h2>
        <p><strong>Autor:</strong> ${post.autor}</p>
        <p><strong>Publicado em:</strong> ${new Date(post.data).toLocaleDateString()}</p>
      `;
    }

    function carregarPost(id) {
      buscarPost(id)
        .then(renderizarPost)
        .catch(erro => console.error('Erro na requisição:', erro));
    }

    carregarPost(42);
  </script>
</body>
</html>

Esse código simula como uma aplicação real organizaria a página HTML e o consumo da API. Separar a lógica em funções e mantê-la clara facilita a manutenção, testes e futuras melhorias do projeto.

Dicas para consumir API com JavaScript com segurança e boas práticas

Sempre trate os erros da requisição (uso de try/catch com async/await também é válido)
Evite expor dados sensíveis ou chaves de API no front-end
Utilize HTTPS sempre que possível
Leia a documentação da API para entender limites de uso, headers obrigatórios e formatação esperada

Links úteis para praticar e testar APIs

Ligando os pontos com artigos anteriores

Se você está seguindo a nossa trilha para iniciantes, este artigo se conecta diretamente com:

Conclusão

Saber como consumir API com JavaScript é um passo crucial para quem deseja criar interfaces dinâmicas, conectadas e realmente funcionais. É esse conhecimento que permite transformar um código estático em uma aplicação que interage com dados reais.

No próximo artigo da trilha, vamos falar sobre Promises em JavaScript e como elas ajudam a lidar com operações assíncronas de forma mais eficiente.

📲 Quer acompanhar a trilha completa e ser avisado sempre que um novo artigo sair? Já estamos divulgando todos os textos em nosso canal exclusivo no Instagram!