Como fazer um POST request a uma API usando Javascript

Hoje mostrarei como fazer um POST request a uma API usando Javascript

Utilizando o Fetch API que tem por obrigatoriedade colocar um parâmetro que é a URL de requisição. No segundo parâmetro será o método de requisição, se ele será um GET, POST, PUT ou algum outro. O terceiro parâmetro que devemos inserir é body que dentro dele irá os dados na qual vão ser enviadas para API.
Nesse exemplo utilizaremos a API jsonplaceholder.

fetch("https://jsonplaceholder.typicode.com/todos", {
  method: "POST",
  body: JSON.stringify({
    userId: 1,
    title: "My first title",
    completed: true
  }),
  headers: {
    "Content-type": "application/json"
  }
});

Para garantir que os dados vão em formato JSON, utilizamos JSON.stringify assim iremos garantir que os dados enviados estão em formato correto. Alguns APIs recendo um outro formato de conteúdo como por exemplo text. Podemos ver o formato no objeto headers, dentro dele possui o Content-type que mostrará o tipo de conteúdo a ser enviado. É necessário saber qual formato de requisição a API recebe para poder ser inserido o correto no content-type.

Quando utilizamos o Fetch devemos estar cientes que é uma API em Javascript que nos permite fazer requisições assíncronas e que utilizam promises para tratar as respostas da nossa requisição. Promises são promessas de uma resposta, basicamente se solicito algo a uma API estou esperando uma promessa de resposta, seja ela uma falha ou uma conclusão.

Como entendemos essa promise é bem simples, primeiro devemos converter a reposta da API em JSON, e logo após teremos nossa resposta pronta para ser tratada e mostrada no Front End.

fetch("https://jsonplaceholder.typicode.com/todos", {
  method: "POST",
  body: JSON.stringify({
    userId: 1,
    title: "My first title",
    completed: true
  }),
  headers: {
    "Content-type": "application/json"
  }
})
.then((response) => response.json())
.then((data) => console.log(data));

Resposta da API mostrada no console log.

Abaixo mostro o cabeçalho da nossa requisição no inspecionar elemento e na aba rede. Vimos que o status de da resposta foi 201, então significa com o POST deu certo.

Como fazer um POST request utilizando jQuery

Utilizando jQuery economizamos linhas, porem a premissa é a mesma, mudamos algumas coisas, como por exemplo a nomenclatura Fetch, que no jQuery usamos apenas $.post(). Utilizar jQuery é tão simples quanto utilizar o próprio Fetch. Você pode acessar os dados da requisição no callback da função. Não esqueça de fazer a importação do jQuery antes de usar.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.2/jquery.min.js" integrity="sha512-tWHlutFnuG0C6nQRlpvrEhE4QpkG1nn2MOUMWmUeRePl4e3Aki0VB6W1v3oLjFtd0hVOtRQ9PHpSfN6u6/QXkQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

const body = {
  userId: 1,
  title: "My first title",
  completed: true
};
$.post("https://jsonplaceholder.typicode.com/todos", body, (data, status) => {
  console.log(data);
});