Consumir uma API significa utilizar um serviço existente para acessar dados, enquanto criar uma API envolve desenvolver o serviço que disponibiliza essas informações.
A Fetch API permite realizar requisições HTTP com JavaScript e trabalha com Promises, que podem ser organizadas com async/await.
É necessário verificar a resposta da requisição, interpretar os dados, geralmente em JSON, e tratar erros antes de exibi-los na página.
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.
Teste vocacional
Qual carreira combina com o seu perfil?
Responda as perguntas e descubra o curso certo e as bolsas ideais para você!
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.
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.
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.
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.
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.
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.
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.
Qual é a diferença entre consumir e criar uma API?
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.
Preciso aprender Promises antes de usar async/await?
É 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.
Por que o Fetch não apresenta erro quando a API retorna 404?
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.
Preciso usar .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().
Posso usar Fetch para enviar dados?
Sim. O fetch() aceita configurações adicionais, incluindo métodos como POST, além de cabeçalhos e corpo da requisição.
Por que o navegador bloqueia algumas APIs?
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.
Qual API é indicada para quem está começando?
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.
Como começar a consumir APIs com JavaScript?
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.
Construa sua carreira em tecnologia com formações alinhadas ao mercado
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.
Ver publicações 
