Como Usar Fetch no JavaScript de Forma Simples
Entenda promessas, HTTP requests e APIs usando JavaScript com exemplos práticos.
Por que isso é importante
Compreender como o método Fetch funciona é essencial para qualquer desenvolvedor web moderno. Ele permite a comunicação entre o navegador e servidores, consumindo APIs com facilidade. Além disso, é baseado em Promises, tornando seu uso muito mais simples e eficiente do que técnicas mais antigas como o AJAX.
O que é o Fetch no JavaScript?
O Fetch é um método nativo do JavaScript moderno utilizado para fazer requisições HTTP. Com ele é possível buscar ou enviar dados para servidores de maneira assíncrona, utilizando Promises para lidar com respostas e erros.
Como o Fetch se relaciona com Promise?
O Fetch utiliza Promises para processar requisições. Assim como uma Promise tradicional, podemos usar .then() para lidar com o sucesso e .catch() para lidar com erros, tornando o código mais organizado e fácil de entender.
Relembrando Promises
Uma Promise representa uma operação assíncrona. Ela aceita duas funções: resolve quando algo dá certo, e reject quando algo dá errado. Utilizamos .then() para capturar o valor de sucesso e .catch() para capturar o erro.
Exemplo prático de Promise
resolve e reject..then() e .catch() para tratar os resultados.Entendendo requisições HTTP
Toda comunicação entre front-end e back-end feita pela web acontece via requisições HTTP. Seja para buscar dados (GET) ou enviar informações (POST), o JavaScript permite essa integração entre navegadores e servidores via Fetch.
Comparando Fetch com AJAX
AJAX (XMLHttpRequest)
Método mais antigo de requisição HTTP no navegador
Prós
- Suporte antigo
- Controle avançado
Contras
- Sintaxe complexa
- Não baseado em Promise
Fetch API
Método moderno com sintaxe limpa e uso de Promises
Prós
- Baseado em Promise
- Código mais legível
- Melhor integração com async/await
Contras
- Requer conhecimento básico de Promises
Fazendo uma requisição com Fetch
A requisição usando Fetch exige apenas um parâmetro obrigatório: a URL. Podemos adicionar um segundo parâmetro com opções como método HTTP, cabeçalhos e corpo da requisição.
Exemplo real com a API ViaCEP
Uma API comum de testes é o ViaCEP. Com ela, é possível recuperar cidade, estado e endereço a partir de um número de CEP. O Fetch pode ser usado para buscar essas informações e preencher automaticamente campos de formulário.
Formatos de resposta: o JSON
ℹ️Atenção
A maioria das APIs responde com JSON — um formato leve de texto para troca de dados. Para que possamos utilizá-lo no JavaScript, precisamos chamar o método .json() após o fetch para transformar a resposta em objeto.
Tratando sucesso e erro com Fetch
O Fetch utiliza .then() para capturar a resposta bem-sucedida e .catch() para tratar erros como falhas no servidor ou resposta malformada. Assim, é possível manter o controle de toda a operação assíncrona.
Como estruturar uma função com Fetch
Uma função com Fetch pode receber a URL como parâmetro, executar a requisição, tratar a resposta com response.json() e retornar os dados prontos para uso diretamente no frontend.
Comunicação entre front-end e back-end
Em aplicações reais, é comum o JavaScript fazer Fetch para arquivos PHP no back-end, passando dados que serão processados e salvos em bancos de dados, ampliando a interatividade e funcionalidades das aplicações web.
Diferenciando métodos GET e POST
⚠️Atenção
O método padrão do Fetch é o GET, usado para buscar dados. Quando precisamos enviar informações para o servidor, utilizamos o método POST junto com o corpo da requisição via body.
Organizando requisições com async/await
Para tornar o código ainda mais legível, podemos usar async/await com Fetch. Isso evita o encadeamento excessivo de .then() e melhora a clareza da lógica de execução.
Erros comuns ao usar Fetch
❌Atenção
Esquecer de usar await com response.json(), não tratar erros corretamente ou montar a URL de forma incorreta são erros frequentes ao começar com Fetch.
Integração com formulários
É possível capturar valores de input, como um campo de CEP, e usar esses dados para fazer Fetch dinâmico à API do ViaCEP, preenchendo automaticamente outros campos do formulário.
Conclusão
Aprender Fetch é uma das primeiras grandes conquistas para quem está estudando JavaScript. Ele conecta o front-end com servidores e APIs de forma moderna, fácil de entender e poderosa.