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 .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
- Passo 1: Criamos uma constante e instanciamos uma nova Promise.
- Passo 2: Dentro dessa Promise, utilizamos uma arrow function
com parâmetrosresolveereject. - Passo 3: Usamos estruturas condicionais para decidir qual
função será chamada. - Passo 4: Utilizamos
.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.
Checklist de Implementação
- Entendeu o conceito de Promise e como ela funciona
- Aprendeu a diferença entre Fetch e AJAX
- Fez a primeira requisição com Fetch
- Soube tratar erros com .catch
- Entendeu o uso de JSON nas respostas
- Praticou integração com API ViaCEP
Perguntas frequentes
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.
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.