Guia Rápido: Como Consumir APIs com Fetch

O que é Fetch?

A API Fetch é a forma moderna de fazer requisições HTTP no JavaScript. Com ela, podemos buscar dados de servidores externos de maneira simples e eficiente.

Fazendo uma requisição GET

Vamos consumir uma API pública que retorna dados de usuários fictícios.

fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Erro ao buscar dados:', error));

Isso retornará um array de usuários no console.

Exibindo dados na tela

Agora, vamos mostrar esses dados em uma página HTML.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lista de Usuários</title>
</head>
<body>
  <h1>Usuários</h1>
  <ul id="user-list"></ul>
  <script>
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(users => {
        const list = document.getElementById('user-list');
        users.forEach(user => {
          const li = document.createElement('li');
          li.textContent = user.name;
          list.appendChild(li);
        });
      })
      .catch(error => console.error('Erro ao buscar dados:', error));
  </script>
</body>
</html>

Próximos passos

Experimente modificar a API para buscar posts ou comentários e treine diferentes tipos de requisições como POST, PUT e DELETE.