Aprenda como consumir APIs com JavaScript usando a Fetch API, entenda requisições HTTP, Promises, async/await, JSON e tratamento de erros.
Em resumo:
async/await.Veja mais informações a seguir!
Consumir uma API é uma tarefa comum no desenvolvimento web. Por meio dela, uma aplicação pode solicitar dados a outro serviço e utilizar essas informações em uma página ou sistema.
Para quem está começando a programar, é importante diferenciar consumir uma API de criar uma API. No primeiro caso, o código utiliza um serviço existente para buscar ou enviar informações. No segundo, o desenvolvedor constrói o serviço que recebe essas requisições e fornece os dados.
Neste guia, o foco está no consumo de APIs no navegador com JavaScript e na utilização da Fetch API, recurso nativo da linguagem para realizar requisições HTTP.
Leia mais informações: O que é DOM no JavaScript? Entenda a estrutura das páginas web
+ Faça a Trilha de Tecnologia para Engenheiro de Software na Allevo Tech
API é a sigla para Application Programming Interface. Em aplicações web, uma API permite que diferentes sistemas troquem informações por meio de uma interface definida.
No navegador, um script JavaScript pode enviar uma requisição para um servidor e receber uma resposta estruturada. Em muitos casos, os dados são enviados em formato JSON.
A API funciona como uma camada de comunicação entre aplicações. O código que faz a requisição não precisa conhecer todos os processos internos do servidor para utilizar os dados disponibilizados por ele.
Os dois conceitos estão relacionados, mas representam atividades diferentes.
Consumir uma API significa utilizar um serviço que já existe. Um site pode, por exemplo, solicitar dados sobre produtos, usuários ou outros recursos disponibilizados por um servidor.
Criar uma API significa desenvolver o serviço responsável por receber as requisições, processar as informações e devolver uma resposta.
Um mesmo projeto pode consumir APIs externas e oferecer sua própria API, mas as duas atividades envolvem responsabilidades diferentes.
Leia mais: Como trabalhar com DevOps: o que faz o profissional e como começar
As APIs utilizadas na web normalmente trabalham com o protocolo HTTP. Cada requisição possui informações que indicam o recurso solicitado e a operação que será realizada.
Entre os métodos HTTP mais utilizados estão:
| Método | Uso típico |
|---|---|
| GET | Buscar dados |
| POST | Enviar dados para criar um registro |
| PUT | Atualizar um registro |
| DELETE | Remover um registro |
Para os primeiros exercícios de consumo de APIs, o método GET é um dos mais comuns.
Além do método, a requisição utiliza uma URL, que aponta para o endpoint responsável pelo recurso solicitado.
Os headers, ou cabeçalhos, também podem transportar informações importantes, como o formato dos dados e informações de autenticação.
A Fetch API é um recurso nativo do JavaScript moderno utilizado para realizar requisições HTTP.
Uma chamada simples pode ser feita com:
fetch(url)O retorno do fetch() é uma Promise, e não diretamente os dados solicitados.
Por isso, é necessário aguardar a conclusão da operação antes de trabalhar com a resposta. Existem duas formas comuns de fazer isso: utilizando .then() e .catch() ou usando async/await.
+ Faça a Trilha de Tecnologia para Engenheiro de Software na Allevo Tech
O async/await permite escrever operações assíncronas de maneira mais próxima de uma sequência de instruções.
Um exemplo básico é:
async function buscarDados() {
const resposta = await fetch("https://exemplo.com/api/dados");
const dados = await resposta.json();
console.log(dados);
}Nesse exemplo, fetch() faz a requisição e await aguarda a resposta.
Depois, resposta.json() interpreta o conteúdo recebido como JSON. O resultado é armazenado na variável dados.
É importante entender que async/await não elimina o comportamento assíncrono do JavaScript. A sintaxe apenas organiza a forma como o código trabalha com a Promise.
+ Transição de carreira para tecnologia após os 30: guia completo para começar
Muitas APIs retornam informações em JSON, formato utilizado para representar objetos e listas de dados.
Depois de receber a resposta, o método .json() pode ser utilizado para transformar o conteúdo em um objeto ou array JavaScript.
Por exemplo:
const resposta = await fetch("https://exemplo.com/api/usuarios");
const usuarios = await resposta.json();
console.log(usuarios);Depois dessa etapa, os dados podem ser manipulados pelo JavaScript e utilizados na página.
Depois de receber os dados, é possível inseri-los na página por meio da manipulação do DOM, sigla para Document Object Model.
Um elemento pode ser selecionado com métodos como:
document.querySelector()ou:
document.getElementById()Para inserir texto simples, textContent é uma das opções disponíveis.
Por exemplo:
const titulo = document.querySelector("#titulo");
titulo.textContent = dados.nome;Quando é necessário criar uma estrutura HTML, innerHTML também pode ser utilizado. Nesse caso, é importante tratar corretamente dados externos para evitar problemas de segurança, especialmente quando o conteúdo não é confiável.
+ O que é TypeScript? Entenda por que a linguagem ganhou espaço
Uma requisição pode falhar por diferentes motivos. Problemas de conexão, endereço incorreto ou indisponibilidade do servidor são alguns exemplos.
Com async/await, o tratamento pode ser feito com try/catch:
async function buscarDados() {
try {
const resposta = await fetch("https://exemplo.com/api/dados");
if (!resposta.ok) {
throw new Error("Erro na requisição");
}
const dados = await resposta.json();
console.log(dados);
} catch (erro) {
console.error(erro);
}
}Existe um ponto importante nesse processo: Fetch não rejeita automaticamente a Promise quando o servidor responde com códigos HTTP como 404 ou 500.
Por isso, é necessário verificar response.ok ou response.status.
Uma resposta com status 404, por exemplo, significa que o servidor respondeu, mas o recurso solicitado não foi encontrado. Esse cenário precisa ser tratado pelo código.
+ Vale a pena aprender SQL em 2026? Veja oportunidades e mercado
Sim. Uma das situações mais comuns está relacionada ao CORS, sigla para Cross-Origin Resource Sharing.
Os navegadores aplicam políticas de segurança para controlar requisições entre diferentes origens. Por isso, uma página pode não conseguir acessar diretamente determinada API caso o servidor não permita esse tipo de solicitação.
Quando isso acontece, é necessário consultar a documentação da API para verificar as regras de acesso e as configurações de CORS.
Consumir uma API significa utilizar um serviço existente para acessar ou enviar dados. Criar uma API significa desenvolver o serviço que recebe as requisições e define as respostas.
É recomendado entender o conceito básico de Promises. O async/await utiliza esse mesmo mecanismo e compreender como uma Promise é resolvida ou rejeitada facilita a identificação de erros.
Porque uma resposta HTTP 404 não representa uma falha de rede. O servidor respondeu à requisição. Por isso, é necessário verificar response.ok ou response.status manualmente.
.json() depois de fetch()?Não em todos os casos. O .json() deve ser usado quando o conteúdo recebido está em JSON. Para respostas em texto, por exemplo, existe o método .text().
Sim. O fetch() aceita configurações adicionais, incluindo métodos como POST, além de cabeçalhos e corpo da requisição.
O bloqueio pode estar relacionado ao CORS e às políticas de segurança aplicadas pelo navegador. A API precisa permitir requisições provenientes da origem utilizada pela aplicação.
APIs públicas e gratuitas, sem autenticação complexa, costumam facilitar os primeiros exercícios. Elas permitem concentrar o aprendizado no fluxo da requisição, leitura da resposta e manipulação dos dados.
O consumo de APIs com JavaScript pode ser dividido em algumas etapas: escolher um endpoint, realizar a requisição, aguardar a resposta, verificar o status, interpretar os dados e utilizá-los na aplicação.
Para quem está começando, o método GET e a Fetch API oferecem uma forma direta de entender esse fluxo.
Depois de dominar requisições simples, é possível avançar para autenticação, envio de dados com POST, parâmetros de URL, tratamento de diferentes respostas HTTP e integração com APIs que exigem configurações específicas.
Se você quer ingressar ou crescer no mercado de tecnologia, a Allevo Tech oferece formações práticas em áreas de alta demanda, como Engenharia de Software e Ciência de Dados.
As trilhas são estruturadas para desenvolver competências técnicas e preparar você para os desafios do mercado de trabalho.
Clique no botão abaixo e conheça as formações da Allevo Tech que podem impulsionar a sua trajetória profissional.
Em resumo: Quem faz curso técnico pode, no futuro, ter uma parte do Enem relacionada à própria formação profissional. É o que prevê o Projeto de Lei 3227/2026, que propõe adequar o exame aos diferentes itinerários do ensino médio, incluindo a formação técnica e profissional. Para esses estudantes, seriam criadas questões específicas relacionadas à área […]
Em resumo: Quando um programa precisa reagir de formas diferentes dependendo do valor de uma variável, uma única verificação não é suficiente. É nesse ponto que entram as estruturas condicionais do Java: if, else if e else permitem que o código teste várias possibilidades, em ordem, e execute apenas o bloco que corresponde à situação […]
Entenda o que é uma linha de código, como ela representa instruções e por que clareza, organização e code review importam na programação