Cliente HTTP em JavaScript: fazendo requisições corretamente do A ao Z

Treinador Online de Python para Iniciantes

Aprenda Python facilmente sem sobrecarga teórica. Resolva tarefas práticas com verificação automática e escreva código diretamente no navegador.

Start Course

Cliente HTTP em JavaScript: fazendo requisições corretamente — do A ao Z

No desenvolvimento web moderno, interagir com APIs externas e servidores é uma tarefa básica. Seja para obter dados meteorológicos, enviar um formulário ou integrar com um gateway de pagamento, você precisará de um cliente HTTP. Neste artigo, vamos analisar como criar requisições HTTP em JavaScript (Node.js) corretamente: desde a escolha da ferramenta até o tratamento de erros e otimização. Você aprenderá a escrever código confiável e eficiente.

1. Escolha da ferramenta: capacidades nativas vs bibliotecas

O Node.js oferece várias maneiras de executar requisições HTTP. A escolha depende da complexidade da tarefa e das preferências pessoais.

1.1. Módulo embutido `http` / `https`

Esta é a abordagem de mais baixo nível. Ela oferece controle total, mas requer muito código para requisições simples.

const https = require('https');

function getUsers() {  return new Promise((resolve, reject) => {    const url = 'https://jsonplaceholder.typicode.com/users';    https.get(url, (res) => {      let data = '';      res.on('data', chunk => data += chunk);      res.on('end', () => {        try {          resolve(JSON.parse(data));        } catch (e) {          reject(e);        }      });    }).on('error', reject);  });}

getUsers().then(console.log).catch(console.error);

1.2. `fetch` global (a partir do Node.js 18+)

A partir da versão 18, o Node.js possui o fetch nativo, familiar dos navegadores. Esta é uma API moderna e conveniente.

async function getPosts() {  try {    const response = await fetch('https://jsonplaceholder.typicode.com/posts');    if (!response.ok) {      throw new Error(`HTTP error! status: ${response.status}`);    }    const data = await response.json();    return data;  } catch (error) {    console.error('Fetch error:', error);    throw error;  }}

getPosts().then(posts => console.log(posts.slice(0, 2)));

1.3. Bibliotecas populares: `axios`

axios é a biblioteca mais popular para requisições HTTP. Ela oferece uma API conveniente, suporte a promises, interceptadores (interceptors) e parsing automático de JSON.

const axios = require('axios');

async function createTodo() {  try {    const response = await axios.post('https://jsonplaceholder.typicode.com/todos', {      title: 'Estudar clientes HTTP',      completed: false,      userId: 1    });    console.log('Criado:', response.data);    return response.data;  } catch (error) {    console.error('Erro:', error.response?.data || error.message);  }}

createTodo();

Resumo: Para scripts simples, use fetch. Para projetos sérios com muitas requisições e interceptadores, use axios. Deixe o módulo http para casos específicos.

2. Tipos principais de requisições e trabalho com dados

Vamos analisar como enviar corretamente requisições GET, POST, PUT e DELETE usando axios.

2.1. GET — obter dados

async function getUser(id) {  try {    const { data } = await axios.get(`https://jsonplaceholder.typicode.com/users/${id}`);    return data;  } catch (error) {    throw new Error(`Não foi possível obter o usuário ${id}: ${error.message}`);  }}

2.2. POST — criar recurso

Passamos dados no corpo da requisição. É importante especificar o tipo de conteúdo (Content-Type). O Axios faz isso automaticamente para JSON.

async function createUser(userData) {  const response = await axios.post('https://jsonplaceholder.typicode.com/users', userData, {    headers: {      'Content-Type': 'application/json'    }  });  return response.data;}