APIs em JavaScript: Conectando sua
Aplicação ao Mundo
O que é uma API?
API (Application Programming Interface) é um conjunto de regras que permite que
diferentes softwares se comuniquem. Para desenvolvedores web, APIs são essenciais
para conectar uma aplicação a serviços externos, como bancos de dados, redes sociais
ou outras fontes de dados. As APIs RESTful, que usam o protocolo HTTP, são as mais
comuns na web.
Consumindo APIs com fetch
A API fetch é a maneira moderna e recomendada para fazer requisições de rede em
JavaScript. Ela é baseada em Promises, o que a torna perfeita para uso com
async/await .
Requisição GET (Obter Dados)
async function buscarDadosDaAPI() {
try {
const resposta = await
fetch("https://jsonplaceholder.typicode.com/posts/1");
if (!resposta.ok) {
throw new Error(`Erro HTTP! Status: ${resposta.status}`);
}
const dados = await resposta.json();
console.log("Dados recebidos:", dados);
} catch (erro) {
console.error("Falha ao buscar dados:", erro);
}
}
buscarDadosDaAPI();
Explicação:
1. fetch("URL") : Faz uma requisição GET para a URL. Retorna uma Promise que
resolve para o objeto Response .
2. resposta.ok : Verifica se a requisição foi bem-sucedida (status 200-299).
3. await resposta.json() : Converte o corpo da resposta para um objeto
JavaScript.
4. try...catch : Captura erros de rede ou erros lançados manualmente.
Requisição POST (Enviar Dados)
Para enviar dados, você precisa configurar o objeto de opções do fetch .
async function enviarDadosParaAPI() {
const novoPost = {
title: "Meu Post",
body: "Conteúdo do post.",
userId: 1,
};
try {
const resposta = await fetch("https://jsonplaceholder.typicode.com/posts",
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(novoPost),
});
if (!resposta.ok) {
throw new Error(`Erro HTTP! Status: ${resposta.status}`);
}
const dadosCriados = await resposta.json();
console.log("Post criado:", dadosCriados);
} catch (erro) {
console.error("Falha ao enviar dados:", erro);
}
}
enviarDadosParaAPI();
Explicação:
method: "POST" : Especifica o método HTTP.
headers : Informa ao servidor o tipo de conteúdo que estamos enviando.
body: JSON.stringify(novoPost) : Converte o objeto JavaScript para uma
string JSON antes de enviá-lo.
Pontos Importantes
CORS (Cross-Origin Resource Sharing): Por segurança, navegadores bloqueiam
requisições entre domínios diferentes. A API precisa permitir o acesso do seu
domínio.
Chaves de API (API Keys): Muitas APIs exigem uma chave para autenticação.
Nunca exponha chaves sensíveis no código do frontend. Gerencie-as em um
backend.
Documentação: Sempre leia a documentação da API para entender seus
endpoints, parâmetros e regras.
Conclusão
Dominar o consumo de APIs com fetch e async/await é uma habilidade
fundamental para o desenvolvimento web moderno, permitindo que suas aplicações
se tornem dinâmicas e conectadas a um vasto ecossistema de serviços.
