Como Enviar Requisições HTTP Usando JavaScript

Hoje em dia, a interação entre aplicações web depende do HTTP. Por exemplo, digamos que você tenha um aplicativo de loja online e queira criar um novo produto. Você deve preencher todas as informações necessárias e provavelmente clicar em um botão que diz "Criar".

Essa ação enviará uma solicitação HTTP para o backend, juntamente com todos os dados necessários, e o aplicativo backend usará esses dados para fazer alterações no banco de dados. Após a conclusão da ação, seja bem-sucedida ou não, uma resposta HTTP será enviada de volta para o frontend, que agirá de acordo com o status dessa resposta.

Quando essas solicitações e respostas são transferidas de um lado para o outro, elas precisam seguir um certo formato para que ambas as extremidades possam se entender. O HTTP foi criado para esse propósito. É um protocolo de rede padrão que permite que aplicações web entendam e se comuniquem entre si.

Quais São os Métodos de Solicitação HTTP?

Existem vários métodos que você pode usar para enviar uma solicitação HTTP, e cada um deles serve a um propósito diferente, como mostrado abaixo:

O Método GET

O método GET é usado para solicitar dados e recursos do servidor. Quando você envia uma solicitação GET, os parâmetros de consulta são incorporados na URL em pares de nome/valor, assim:

http://example.com/index.html?name1=value1&name2=value2

Note que o ponto de interrogação (?) indica o início de uma lista de parâmetros. Cada parâmetro forma um par chave/valor (nome=valor), e o e comercial (&) é usado para dividir dois parâmetros diferentes.

O Método POST

O método POST é usado para enviar dados ao servidor, seja adicionando um novo recurso ou atualizando um recurso existente. Os parâmetros são armazenados no corpo da solicitação HTTP.

POST /index.html HTTP/1.1
Host: example.com
name1=value1&name2=value2

O Método DELETE

Este método remove um recurso do servidor.

O Método HEAD

O método HEAD funciona como o GET, exceto que a resposta HTTP enviada pelo servidor conterá apenas o cabeçalho, mas não o corpo. Isso significa que, se o servidor estiver "OK" com a solicitação, ele retornará uma resposta 200 OK, mas não o recurso solicitado. Você só pode recuperar o recurso com o método GET.

Isso é muito útil quando você está testando se o servidor está funcionando. Às vezes, o recurso pode demorar a ser transmitido, e para fins de teste, você só precisa de uma resposta 200 OK para saber que tudo está funcionando corretamente.

O Método PUT

O método PUT é usado para atualizar recursos existentes e é semelhante ao método POST, com uma pequena diferença.

Quando você faz PUT num recurso que já existe, o recurso antigo será sobrescrito. E fazer múltiplas solicitações PUT idênticas terá o mesmo efeito que fazê-la uma vez.

Quando você faz POST de recursos idênticos, esse recurso será duplicado toda vez que a solicitação for feita.

O que é a Fetch API?

Por muito tempo, a comunidade JavaScript careceu de uma maneira padrão de enviar solicitações HTTP. Algumas pessoas usavam o XMLHttpRequest, também conhecido como AJAX, enquanto outras preferiam bibliotecas externas como Axios ou jQuery.

A Fetch API foi introduzida em 2015 como a maneira moderna, simplificada e padrão de fazer solicitações HTTP usando JavaScript. Ela é suportada nativamente, portanto, não é necessário instalar nenhuma biblioteca de terceiros.

Como Enviar uma Solicitação GET Usando JavaScript

A Fetch API é baseada em promessas, o que significa que oferece uma sintaxe limpa e concisa para escrever operações assíncronas. Por exemplo, é assim que você pode enviar uma solicitação GET usando a Fetch API:

fetch("https://jsonplaceholder.typicode.com/users")
  .then((response) => {
    // Se a resposta não for 2xx, lançar um erro
    if (!response.ok) {
      throw new Error("A resposta da rede não foi ok");
    }

    // Se a resposta for 200 OK, retornar a resposta em formato JSON
    return response.json();
  })
  .then((data) => console.log(data)) // Você pode continuar a fazer algo com a resposta
  .catch((error) => console.error("Erro na fetch:", error)); // Em caso de erro, ele será capturado e registrado

Você também pode incluir opções personalizadas na solicitação, como cabeçalhos personalizados, tokens de autorização, etc.

fetch("https://jsonplaceholder.typicode.com/users", {
  headers: {
    "Content-Type": "application/json",
    "Authorization": "seu-token-aqui",
  },
  credentials: "same-origin",
})
  .then((response) => {
    if (!response.ok) {
      throw new Error("A resposta da rede não foi ok");
    }
    return response.json();
  })
  .then((data) => console.log(data))
  .catch((error) => console.error("Erro na fetch:", error));

Como Enviar uma Solicitação POST Usando JavaScript

Ao enviar uma solicitação POST, as coisas ficam um pouco mais complexas porque você precisa enviar dados para o servidor no corpo da solicitação. Isso pode se complicar dependendo do tipo de dados que você está enviando e do seu caso de uso específico.

Por exemplo, o código a seguir envia dados JSON para o backend:

fetch("https://jsonplaceholder.typicode.com/users", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    name: "John Doe",
    email: "johndoe@example.com",
  }),
});

Há algumas coisas às quais você deve prestar atenção aqui. Primeiro, você deve especificar explicitamente o método de solicitação. Se você omitir isso, o método padrão GET será usado.

Além disso, o corpo da solicitação só aceita dados em formato string, então você deve usar o método JSON.stringify() para converter JSON em uma string antes de atribuí-lo ao corpo da solicitação.

Isso também explica por que é importante incluir o cabeçalho Content-Type, que informa ao destinatário como analisar o corpo da solicitação.

No entanto, as coisas geralmente são mais complexas na prática. Por exemplo, ao trabalhar com formulários web, em vez de JSON, você provavelmente usará a codificação de formulário x-www-form-urlencoded, caso em que a solicitação pode ser enviada assim:

O exemplo a seguir assume que você entende o que são manipuladores de eventos.

document.addEventListener("DOMContentLoaded", function () {
  const form = document.querySelector("form");
  const usernameInput = document.getElementById("username");
  const emailInput = document.getElementById("email");

  const formData = new URLSearchParams();

  usernameInput.addEventListener("input", function () {
    formData.set("username", usernameInput.value);
  });

  emailInput.addEventListener("input", function () {
    formData.set("email", emailInput.value);
  });

  form.addEventListener("submit", async function (event) {
    event.preventDefault(); // Prevenir a ação padrão de envio do formulário

    await fetch("https://jsonplaceholder.typicode.com/users", {
      method: "POST",
      body: formData.toString(),
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
    });
  });
});

Se você precisar enviar arquivos para o backend, você precisará da codificação de formulário multipart/form-data.

document.addEventListener("DOMContentLoaded", function () {
  const form = document.getElementById("myForm");
  const usernameInput = document.getElementById("username");
  const emailInput = document.getElementById("email");
  const pictureInput = document.getElementById("picture");

  const formData = new FormData();

  usernameInput.addEventListener("input", function () {
    formData.set("username", usernameInput.value);
  });

  emailInput.addEventListener("input", function () {
    formData.set("email", emailInput.value);
  });

  pictureInput.addEventListener("change", function () {
    formData.set("picture", pictureInput.files[0]);
  });

  form.addEventListener("submit", async function (event) {
    event.preventDefault(); // Prevenir o envio padrão do formulário

    await fetch("https://jsonplaceholder.typicode.com/users", {
      method: "POST",
      body: formData,
    });
  });
});

Note que ao usar FormData() para construir o corpo da solicitação, o Content-Type será configurado automaticamente como multipart/form-data. Nesse caso, não é necessário definir um cabeçalho Content-Type personalizado.

Como Enviar uma Solicitação PUT Usando JavaScript

A solicitação PUT funciona de maneira semelhante à POST, mas você deve lembrar de definir o método como PUT.

fetch("https://jsonplaceholder.typicode.com/users/123", {
  method: "PUT",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    name: "John Doe",
    email: "johndoe@example.com",
  }),
});

Realisticamente, você terá que fornecer um id ou qualquer outra chave que permita localizar o registro a ser atualizado no backend.

No exemplo acima, a URL inclui o id do usuário a ser atualizado (/users/123). A solicitação PUT substitui o recurso existente com os dados fornecidos no corpo da solicitação.

Se você estiver usando um backend RESTful, geralmente a URL incluirá o identificador do recurso que você deseja atualizar.

Como Enviar uma Solicitação DELETE Usando JavaScript

A solicitação DELETE funciona de maneira semelhante à PUT, mas lembre-se de definir o método como DELETE.

fetch("https://jsonplaceholder.typicode.com/users/123", {
  method: "DELETE",
});

E, da mesma forma, lembre-se de fornecer um id para que o aplicativo backend saiba qual registro excluir.

No exemplo acima, a URL inclui o id do usuário a ser excluído (/users/123). A solicitação DELETE indica ao backend que o recurso especificado deve ser removido.

Como Enviar uma Solicitação Usando XMLHttpRequest (AJAX)

Além do fetch(), também é possível fazer uma solicitação HTTP usando XMLHttpRequest. O exemplo a seguir demonstra como fazer uma solicitação GET para o endpoint https://jsonplaceholder.typicode.com.

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://jsonplaceholder.typicode.com/users", true);
xhr.onload = function () {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.error("Erro:", xhr.statusText);
  }
};
xhr.onerror = function () {
  console.error("Solicitação falhou");
};
xhr.send();

A sintaxe é um pouco mais complexa, pois XMLHttpRequest depende de funções de callback para trabalhar com operações assíncronas, o que pode levar ao que é conhecido como "callback hell", onde você tem camadas sobre camadas de funções de callback, tornando seu código difícil de ler e manter.

No entanto, XMLHttpRequest tem algumas vantagens. Devido ao fato de que XMLHttpRequest é muito mais antigo em comparação com fetch(), ele é mais amplamente suportado. Você deve considerar usar XMLHttpRequest quando sua aplicação web precisar ser compatível com navegadores mais antigos.

Como Enviar uma Solicitação Usando Bibliotecas Externas

Além dos métodos embutidos, você também pode enviar solicitações HTTP usando bibliotecas de terceiros. Por exemplo, veja como você pode enviar uma solicitação GET usando jQuery:

$.get("https://api.example.com/data", function (data) {
  console.log(data);
}).fail(function (error) {
  console.error("Erro:", error);
});

jQuery é uma das bibliotecas JavaScript mais populares. Ela visa corrigir as partes do JavaScript que são difíceis de usar, e tem sido bastante bem-sucedida nisso.

Nos últimos anos, o jQuery perdeu um pouco de popularidade, pois o JavaScript puro melhorou e os problemas que costumavam incomodar as pessoas foram corrigidos. Não é mais a escolha principal para criar aplicativos JavaScript, especialmente para novos desenvolvedores.

Alternativa: Usando Axios

Você também pode usar Axios, que é um cliente HTTP baseado em promessas, assim como o fetch(), e tem sido o favorito das pessoas por muito tempo antes do fetch() aparecer.

axios
  .get("https://api.example.com/data")
  .then((response) => console.log(response.data))
  .catch((error) => console.error("Erro no Axios:", error));

Axios e fetch() têm uma sintaxe muito semelhante, pois ambos são baseados em promessas. A principal diferença entre eles é que fetch() é embutido, enquanto Axios requer a instalação de uma biblioteca externa. No entanto, o Axios é muito mais rico em recursos, pois vem com interceptadores de solicitações/respostas, manipulação automática de JSON e timeouts embutidos.

Conclusão

Neste tutorial, apresentamos quatro maneiras diferentes de enviar solicitações HTTP usando JavaScript. Cabe a você decidir qual é a melhor para o seu projeto.

Fetch API é a maneira moderna e padrão de fazer solicitações HTTP usando JavaScript. Ela possui uma sintaxe relativamente simples, o que torna seu projeto mais fácil de manter.
XMLHttpRequest é o método legado de enviar solicitações HTTP. Geralmente, não é recomendado para uso em novos projetos, mas se seu projeto precisar ser compatível com navegadores mais antigos, XMLHttpRequest ainda pode ser útil.
jQuery é um pacote externo que pode fazer muitas coisas, incluindo o envio de solicitações HTTP. Embora a importância do jQuery tenha diminuído nos últimos anos, ele ainda é usado em muitos projetos antigos, e você pode encontrá-lo em seu trabalho como desenvolvedor JavaScript.
Axios é uma biblioteca de terceiros usada para enviar solicitações HTTP. Ela possui uma sintaxe muito semelhante à fetch API, mas vem com muitos recursos avançados. Cabe a você decidir se precisa desses recursos. Caso contrário, geralmente é recomendado usar fetch().

Independentemente do método escolhido, cada um tem suas vantagens e desvantagens. A escolha depende das necessidades específicas do seu projeto e dos requisitos de compatibilidade do navegador.

Sugestão de Cursos

Descubra o caminho para se tornar um especialista em programação web. Aprenda HTML, CSS, JavaScript e os principais frameworks nesta jornada emocionante. Com instrutores experientes e materiais práticos, você desenvolverá habilidades práticas para criar sites impressionantes e aplicativos interativos. Impulsione sua carreira na indústria de tecnologia e abra portas para oportunidades de emprego lucrativas. Garanta sua vaga hoje mesmo e inicie sua jornada para se tornar um desenvolvedor web de sucesso.

Método Para Aprender a Programar do Absoluto ZERO com Node.js, React e React Native.

As tecnologias ensinadas no curso são responsáveis por muitas vagas no mercado de trabalho.

Além da alta demanda, os salários vão de R$47.000,00 até R$197.000,00 anuais tendo empresas que possibilitam o trabalho remoto e até vagas Internacionais.

Para que você possa estar apto a preencher uma dessas vagas eu vou te apresentar o passo a passo para você se tornar um verdadeiro expert nessas tecnologias.

O curso te dará o passo a passo de como criar estruturar de um sistema do zero com Node.js, React e React Native.

Saiba mais sobre o curso de Node.js, React e React Native.