Guia para Iniciantes: Consumindo APIs REST
O Que é uma API REST?
Uma API (Interface de Programação de Aplicação) é uma forma de permitir que diferentes aplicações se comuniquem. Quando usamos a arquitetura REST (Representational State Transfer), estamos falando de uma maneira específica de organizar e acessar esses dados, geralmente através de URLs, e usando métodos HTTP como GET, POST, PUT e DELETE.
APIs REST geralmente são acessadas através da Internet e trabalham com dados no formato JSON (JavaScript Object Notation). Pense na API como uma ponte entre o seu programa e um servidor: você faz um pedido (requisição), e o servidor responde com os dados que você pediu.
Principais Métodos HTTP Usados em APIs REST
Antes de praticarmos, vamos entender os métodos HTTP mais usados:
- GET: Pede ao servidor algum dado, como um post, lista de usuários, etc.
- POST: Envia dados ao servidor para criar algo novo, como criar uma conta.
- PUT/PATCH: Envia dados para atualizar algo existente, como modificar um perfil.
- DELETE: Solicita a remoção de algum dado, como apagar uma conta.
Exemplo Prático Usando uma API REST Gratuita
Para este exemplo, vamos usar a API REST pública JSONPlaceholder (https://jsonplaceholder.typicode.com/). Esta API permite simular requisições comuns que encontraríamos em um sistema de blog, como buscar e criar posts.
Vamos explorar alguns exemplos de requisições HTTP para entender como cada método funciona.
Ferramenta para Testar: Fetch API do JavaScript
Como alternativa a ferramentas visuais como Postman, aqui usaremos a Fetch API, que permite fazer requisições HTTP diretamente em JavaScript. Assim, você verá como uma API é consumida em código.
Dica: Se tiver um editor de texto como o VS Code, crie um arquivo HTML e teste os códigos lá para visualizar os resultados.
Exemplo 1: Fazendo uma Requisição GET
Vamos começar com a requisição mais simples: GET. Queremos buscar uma lista de posts.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Consumindo uma API REST</title>
</head>
<body>
<h1>Consumo de API REST - Exemplo</h1>
<button id="getPosts">Buscar Posts</button>
<ul id="postsList"></ul>
<script>
document.getElementById('getPosts').addEventListener('click', () => {
fetch('https://jsonplaceholder.typicode.com/posts') // URL da API
.then(response => response.json()) // Transformando a resposta em JSON
.then(data => {
const postsList = document.getElementById('postsList');
postsList.innerHTML = ''; // Limpa lista antes de exibir novos posts
data.forEach(post => {
const li = document.createElement('li');
li.textContent = `${post.title}: ${post.body}`;
postsList.appendChild(li);
});
})
.catch(error => console.error('Erro:', error));
});
</script>
</body>
</html>
Neste exemplo:
- fetch('URL'): Faz a requisição GET para o endpoint de posts.
- response.json(): Converte a resposta para JSON.
- data.forEach: Itera sobre os posts retornados e exibe o título e conteúdo de cada um.
Exemplo 2: Criando um Novo Post com POST
Agora vamos enviar dados para criar um novo post usando o método POST. Isso requer enviar dados para a API.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Consumindo uma API REST - POST</title>
</head>
<body>
<h2>Criar Novo Post</h2>
<input type="text" id="postTitle" placeholder="Título do post">
<input type="text" id="postBody" placeholder="Conteúdo do post">
<button id="createPost">Criar Post</button>
<p id="responseMessage"></p>
<script>
document.getElementById('createPost').addEventListener('click', () => {
const title = document.getElementById('postTitle').value;
const body = document.getElementById('postBody').value;
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST', // Método POST
headers: {
'Content-Type': 'application/json' // Tipo de conteúdo JSON
},
body: JSON.stringify({
title: title,
body: body,
userId: 1
}) // Convertendo os dados para JSON
})
.then(response => response.json())
.then(data => {
document.getElementById('responseMessage').textContent = `Post criado com ID: ${data.id}`;
})
.catch(error => console.error('Erro:', error));
});
</script>
</body>
</html>
Neste exemplo:
- method: 'POST': Define o método como POST.
- headers: {'Content-Type': 'application/json'}: Informa que os dados estão no formato JSON.
- body: JSON.stringify(...): Envia o título e conteúdo do post como JSON.
Exemplo 3: Atualizando um Post com PUT
Para atualizar, usaremos o método PUT. Vamos modificar um post já existente.
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'PUT',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
id: 1,
title: 'Título Atualizado',
body: 'Conteúdo atualizado do post.',
userId: 1
})
})
.then(response => response.json())
.then(data => console.log('Post atualizado:', data))
.catch(error => console.error('Erro:', error));
Aqui, usamos:
- method: 'PUT': Indica que estamos atualizando um post.
- URL com o ID do post (posts/1): Definimos o ID do post que queremos atualizar.
- JSON.stringify: Atualiza o título e o conteúdo do post.
Exemplo 4: Excluindo um Post com DELETE
Para remover um post, usamos o método DELETE.
fetch('https://jsonplaceholder.typicode.com/posts/1', {
method: 'DELETE'
})
.then(() => console.log('Post excluído'))
.catch(error => console.error('Erro:', error));
Conclusão
Ao seguir esses exemplos, você começa a entender como usar os principais métodos HTTP para consumir uma API REST. Esses passos são comuns em qualquer API RESTful, então ao dominar este processo, você estará pronto para explorar APIs mais complexas!
