0Pricing
Frontend Academy · Aula

API Fetch: GET POST PUT DELETE

Faça solicitações GET com fetch, envie corpos JSON em solicitações POST e PUT e chame endpoints DELETE para remover recursos.

API Fetch: GET POST PUT DELETE é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

A API Fetch

fetch() é a API moderna do navegador para requisições HTTP. Ela retorna uma Promise que é resolvida para um objeto Response. É padrão em todos os navegadores modernos e no Node.js 18+.

Requisição GET básica

O fetch mais simples: passe uma URL, aguarde a resposta e interprete o JSON.

async function fetchUsers() {
  const res = await fetch('https://api.example.com/users');
  if (!res.ok) throw new Error('HTTP ' + res.status);
  const users = await res.json();
  return users;
}

POST com corpo JSON

Use method, headers e body. O corpo deve ser uma string; chame JSON.stringify() no objeto.

async function createUser(user) {
  const res = await fetch('/api/users', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(user)
  });
  if (!res.ok) throw new Error('Failed: ' + res.status);
  return res.json();
}

createUser({ name: 'Alice', email: 'alice@example.com' });

PUT para atualização completa

PUT substitui o recurso. Envie o objeto inteiro; os campos omitidos geralmente são apagados no servidor.

await fetch(`/api/users/${id}`, {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    id, name: 'Alice', email: 'alice@example.com', role: 'admin'
  })
});

PATCH para atualização parcial

PATCH atualiza somente os campos enviados. Use-o para atualizações parciais em vez de PUT.

await fetch(`/api/users/${id}`, {
  method: 'PATCH',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ email: 'new@example.com' })
});

Requisição DELETE

DELETE normalmente não tem corpo. A resposta costuma retornar 204 No Content sem corpo.

async function deleteUser(id) {
  const res = await fetch(`/api/users/${id}`, { method: 'DELETE' });
  if (!res.ok) throw new Error('Delete failed');
  // 204 No Content — no JSON to parse
}

Cabeçalhos de autenticação

Adicione um cabeçalho Authorization aos endpoints protegidos.

const res = await fetch('/api/me', {
  headers: {
    'Authorization': `Bearer ${token}`,
    'Content-Type': 'application/json'
  }
});

Parâmetros de consulta da URL

Crie strings de consulta com URLSearchParams para garantir uma codificação segura.

const params = new URLSearchParams({
  q: 'react hooks',
  page: '2',
  pageSize: '20'
});

const res = await fetch(`/api/search?${params}`);
// /api/search?q=react+hooks&page=2&pageSize=20

Por que fetch não lança exceções para erros HTTP

fetch só rejeita a Promise em caso de falha de rede; uma resposta 404 ou 500 ainda é resolvida com sucesso. Sempre verifique res.ok (true para 2xx) ou res.status e lance a exceção manualmente.

const res = await fetch('/api/users/999');
if (!res.ok) {
  // res.ok is false for 4xx and 5xx
  throw new Error(`Server error ${res.status}: ${await res.text()}`);
}

AbortController para cancelamento

Cancele uma requisição em andamento para evitar resultados desatualizados — isso é essencial para a pesquisa conforme você digita e para a limpeza de efeitos do React.

const controller = new AbortController();

fetch('/api/search?q=hooks', { signal: controller.signal })
  .then(res => res.json())
  .catch(err => {
    if (err.name !== 'AbortError') throw err;
  });

// Cancel:
controller.abort();

Enviando FormData

Para envios de arquivos ou formulários multipart, passe um objeto FormData como corpo. Não defina Content-Type; o navegador o adiciona com o limite correto.

const form = new FormData();
form.append('avatar', fileInput.files[0]);
form.append('name', 'Alice');

await fetch('/api/upload', { method: 'POST', body: form });
// no Content-Type header — browser sets multipart/form-data

Verificação rápida

Por que fetch() não lança um erro quando o servidor retorna 404 ou 500?

Recapitulação: API Fetch

fetch() retorna uma Promise de Response. Métodos: GET (padrão), POST, PUT, PATCH, DELETE. Corpos JSON precisam de JSON.stringify() e do cabeçalho Content-Type. fetch só rejeita em caso de falha de rede; verifique res.ok manualmente. Use URLSearchParams para strings de consulta. Use AbortController para cancelamento. Use FormData para envios de arquivos (sem Content-Type; o navegador cuida disso).

Perguntas Frequentes

A aula “API Fetch: GET POST PUT DELETE” é grátis?

Sim — o texto completo de “API Fetch: GET POST PUT DELETE” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “API Fetch: GET POST PUT DELETE”?

Faça solicitações GET com fetch, envie corpos JSON em solicitações POST e PUT e chame endpoints DELETE para remover recursos. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “API Fetch: GET POST PUT DELETE”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. API Fetch: GET POST PUT DELETE
  2. Axios: interceptadores e URL base
  3. Tratamento de erros: códigos de estado HTTP
  4. SWR e React Query para armazenamento em cache de dados
← Voltar para Frontend Academy