API – Consumindo uma API com Javascript

julho 15, 2025
FrontEnd

APIs (Application Programming Interfaces) são fundamentais para integração entre sistemas conectando tanto sistemas distintos quanto backend e frontend de uma mesma aplicação. Neste guia, exploraremos como consumir APIs públicas usando JavaScript moderno, desde conceitos básicos até técnicas avançadas.

1. Fundamentos de APIs REST

APIs REST utilizam métodos HTTP para operações:

GET: Recuperar dados
POST: Criar novos dados
PUT/PATCH: Atualizar dados
DELETE: Remover dados

2. O Básico: Fetch API

A Fetch API é nativa no JavaScript moderno e substitui o antigo XMLHttpRequest:

// Exemplo básico de GET

fetch(‘https://jsonplaceholder.typicode.com/posts/1’) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(‘Erro:’, error));

3. Exemplos Práticos

Exemplo 1: Listar Dados (GET)

async function fetchPosts() { try { const response = await fetch(‘https://jsonplaceholder.typicode.com/posts’);

if (!response.ok) {

throw new Error(`Erro HTTP: ${response.status}`);

}

const posts = await response.json();

posts.forEach(post => {

console.log(`Título: ${post.title}\nCorpo: ${post.body}\n`);

});

} catch (error) { console.error(“Falha na requisição:”, error);

}

fetchPosts();

Exemplo 2: Criar Dados (POST)

async function createPost() {

const newPost = { title: ‘Novo Post’, body: ‘Conteúdo do post’, userId: 1 };

try { const response = await fetch(‘https://jsonplaceholder.typicode.com/posts’, { method: ‘POST’, headers: { ‘Content-Type’: ‘application/json’ }, body: JSON.stringify(newPost) });

const data = await response.json();

console.log(‘Post criado:’, data);

}

catch (error) { console.error(‘Erro ao criar post:’, error);

}

createPost();

Exemplo 3: Atualizar Dados (PUT)

async function updatePost() {

const updatedData = { title: ‘Título Atualizado’, body: ‘Conteúdo atualizado’ };

try { const response = await fetch(‘https://jsonplaceholder.typicode.com/posts/1’, { method: ‘PUT’, headers: { ‘Content-Type’: ‘application/json’ }, body: JSON.stringify(updatedData) });

const result = await response.json();

console.log(‘Post atualizado:’, result);

}

catch (error) {

console.error(‘Erro na atualização:’, error);

}

updatePost();

4. APIs Públicas para Prática

JSONPlaceholder: Dummy data para testes (https://jsonplaceholder.typicode.com)
PokeAPI: Dados de Pokémon (https://pokeapi.co)
OpenWeatherMap: Dados meteorológicos (https://openweathermap.org/api)
GitHub API: Dados de repositórios (https://docs.github.com/en/rest)

5. Técnicas Avançadas

Gerenciando Headers

fetch(‘https://api.example.com/data’, { headers: { ‘Authorization’: ‘Bearer seu_token’, ‘Custom-Header’: ‘valor’ } });

Tratamento de Erros Detalhado

fetch(‘https://api.example.com/endpoint’) .then(response => { if (!response.ok) { return response.json().then(err => Promise.reject(err)); } return response.json(); }) .catch(error => { console.error(‘Detalhes do erro:’, error.message || error); });

Paginação de Resultados

async function fetchPaginatedData(page = 1) { const response = await fetch(`https://api.example.com/data?page=${page}`); const data = await response.json(); console.log(`Página ${page}:`, data.results); if (data.next) { fetchPaginatedData(page + 1); } }

6. Considerações Importantes

CORS (Cross-Origin Resource Sharing):
- APIs precisam permitir acesso do seu domínio
- Erro comum: No 'Access-Control-Allow-Origin' header
Limites de Requisição:
- Respeite os rate limits da API
- Implemente cache quando possível
Segurança:
- Nunca exponha chaves de API no front-end
- Para dados sensíveis, use um backend proxy
Alternativas ao Fetch:
- Axios: Biblioteca popular com vantagens como:
  - Transformação automática de JSON
  - Proteção contra XSRF
  - Cancelamento de requisições

// Exemplo com Axios

axios.get(‘https://jsonplaceholder.typicode.com/posts/1’) .then(response => console.log(response.data)) .catch(error => console.error(error));

7. Exemplo Integrado: Buscador de Clima

const API_KEY = ‘sua_chave’; // Obtenha em: https://openweathermap.org

const city = ‘São Paulo’;

fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${API_KEY}`) .then(response => response.json()) .then(data => { console.log(` Cidade: ${data.name} Temperatura: ${data.main.temp}°C Clima: ${data.weather[0].description} `);

});

Conclusão

Dominar o consumo de APIs é essencial para desenvolvimento web moderno. Pratique com diferentes APIs públicas, explore documentações e lembre-se sempre de:

Tratar erros de forma elegante
Gerenciar estados de carregamento
Otimizar o número de requisições
Respeitar as políticas de uso das APIs

Recursos Adicionais:

Documentação Fetch API
Lista de APIs Públicas
Postman (Para testar APIs antes de implementar)

Com estes conceitos e exemplos, você está preparado para integrar diversas fontes de dados em seus projetos JavaScript!