Como usar Fetch no JavaScript de forma simples
Entenda promessas, HTTP requests e APIs usando JavaScript com exemplos práticos.
Por que isso é importante
Como usar Fetch no JavaScript de forma simples. Entenda promessas, HTTP requests e APIs usando JavaScript com exemplos práticos.
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 <code>.then()</code> para lidar com o sucesso e <code>.catch()</code> 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: <code>resolve</code> quando algo dá certo, e <code>reject</code> quando algo dá errado. Utilizamos <code>.then()</code> para capturar o valor de sucesso e <code>.catch()</code> 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 <code>.json()</code> após o <code>fetch</code> para transformar a resposta em objeto.
Tratando sucesso e erro com Fetch
O Fetch utiliza <code>.then()</code> para capturar a resposta bem-sucedida e <code>.catch()</code> 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 <code>response.json()</code> 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 <code>body</code> .
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 <code>.then()</code> e melhora a clareza da lógica de execução.
Erros comuns ao usar Fetch
Atenção
Esquecer de usar <code>await</code> com <code>response.json()</code> , 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.