A Fetch API é uma interface moderna do JavaScript que permite realizar requisições de rede (HTTP/HTTPS) de forma assíncrona e baseada em Promises. Ela fornece o método global fetch(), que retorna uma Promise resolve com um objeto Response quando a resposta do servidor estiver disponível. A Fetch API foi projetada para ser um substituto mais simples, flexível e integrável ao ecossistema moderno do que o antigo XMLHttpRequest, sendo padronizada pelo Fetch Standard para garantir comportamento consistente entre navegadores.
O que é a Fetch API?
A Fetch API é um conjunto de interfaces e algoritmos que define como recursos são buscados na web, incluindo o próprio método fetch(), os objetos Request e Response, e regras relacionadas a CORS e redirecionamentos. Ela faz parte do padrão de APIs da web e descreve o modelo de rede que browsers e ambientes compatíveis devem seguir.
Tecnicamente, fetch() inicia o processo de obtenção de um recurso e devolve uma Promise que resolve quando a resposta estiver pronta; a Promise não rejeita para respostas HTTP de erro (por exemplo 404), por padrão — cabe ao desenvolvedor verificar response.ok e o status. Isso torna o fluxo de controle mais explícito e previsível do que depender de callbacks ou eventos.
Por ser baseada em Promises e trabalhar bem com async/await, a Fetch API se integra naturalmente com o código JavaScript moderno, Service Workers e outras APIs da plataforma web. Também existe suporte (polyfills) para ambientes antigos ou que não implementam a API nativamente.
Como funciona — conceitos essenciais
A operação básica consiste em chamar fetch(url, options). O retorno é uma Promise que resolve para um objeto Response, que por sua vez fornece métodos como response.json(), response.text() e response.blob() para ler o corpo da resposta em diferentes formatos.
Além do fetch() simples, existem objetos que modelam a requisição: Request (método, headers, body, modo CORS, credenciais) e Headers. O Fetch Standard também define comportamentos em casos de redirecionamento, cache e políticas de segurança.
Importante entender que algumas operações relacionadas a rede podem falhar com exceções de rede (por exemplo, falta de conexão) — nesses casos a Promise é rejeitada. Já erros HTTP são representados no objeto Response e precisam ser tratados manualmente.
Exemplos de uso práticos
Exemplo simples (GET) usando async/await:
async function obterDados() {
const res = await fetch('https://api.exemplo.com/dados');
if (!res.ok) throw new Error('Erro na requisição: ' + res.status);
const json = await res.json();
return json;
}Exemplo POST com cabeçalhos e corpo JSON:
fetch('https://api.exemplo.com/registro', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ nome: 'Maria', idade: 30 })
})
.then(r => r.json())
.then(dados => console.log(dados))
.catch(err => console.error(err));Para testes e exemplos mais completos (incluindo streaming de resposta e uso com Service Workers), há repositórios e tutoriais práticos mantidos pela MDN e pela comunidade.
Benefícios da Fetch API
Sintaxe moderna: por ser baseada em Promises, o código fica mais legível e compatível com async/await, reduzindo a complexidade associada a callbacks e eventos.
Integração com outras APIs web: Fetch funciona bem com Service Workers e Cache API, permitindo estratégias avançadas de cache, interceptação de requisições e experiências offline.
Flexibilidade e padronização: o Fetch Standard define comportamento consistente para redirecionamentos, CORS e outros detalhes, o que facilita portar código entre navegadores e ambientes.
Recomendações e boas práticas
Trate explicitamente erros HTTP: verifique response.ok e o código de status em vez de assumir que a Promise do fetch() falhará em todos os casos de erro.
Use timeout por conta própria se necessário: Fetch não tem timeout nativo (embora seja possível usar AbortController para cancelar requisições), portanto implemente cancelamento em operações sensíveis ao tempo.
Evite expor credenciais: configure corretamente credentials e CORS no servidor, e não inclua tokens sensíveis em URLs. Para autenticação, prefira cabeçalhos (por exemplo Authorization) enviados via HTTPS.
Perguntas frequentes (FAQs)
Fetch substitui completamente o XMLHttpRequest?
Em muitos casos sim: Fetch oferece uma API mais simples e poderosa que cobre a maioria dos cenários de XHR. No entanto, há diferenças comportamentais (por exemplo, tratamento de progresso de upload/download) que podem tornar XHR necessário em casos específicos.
Quais navegadores suportam Fetch?
Fetch é amplamente suportado nos navegadores modernos. Para ambientes que precisam suportar navegadores antigos é possível usar polyfills como whatwg-fetch. Consulte tabelas de compatibilidade atualizadas se precisar de suporte legado.
Como tratar tempos de espera (timeouts) com Fetch?
Use AbortController para cancelar uma requisição após um tempo limite. Crie um AbortController, passe signal nas opções do fetch e chame controller.abort() quando o timeout expirar.
É melhor usar Fetch ou bibliotecas como Axios?
Fetch é suficiente para muitos casos e evita dependências externas. Bibliotecas como Axios adicionam conveniências (transformação automática de JSON, interceptors, timeout embutido, melhor tratamento de erros) — escolha conforme as necessidades do projeto.
Curiosidades e links úteis
Curiosidade: o nome “Fetch” refere-se não apenas ao método fetch(), mas ao conjunto de algoritmos do Fetch Standard que coordena diferentes formas de buscar recursos na web — inclusive imagens, folhas de estilo e scripts — garantindo coerência entre APIs diversas.
Repositório de exemplos da comunidade e da MDN pode ser uma excelente fonte para ver padrões reais de uso (GET, POST, streaming, Service Workers, etc.). Veja também tutoriais práticos com comparações e dicas de produção.
Leituras recomendadas (links externos): MDN – Fetch API, Fetch Standard (WHATWG), DigitalOcean – tutorial Fetch. Outros recursos práticos: FreeCodeCamp – guia e LogRocket – guia completo.
::contentReference[oaicite:21]{index=21}
