Como Enviar Solicitações POST Fetch com JavaScript

"Fetch POST Requests" tem dois termos que você ouve frequentemente ao discutir desenvolvimento web. Comumente usados em cenários para criar novos registros ou dados no servidor, eles são essenciais para que sistemas ou aplicações se comuniquem entre si. Apesar de parecer complicado, este artigo dissecara as requisições Fetch POST para você!

O que é Fetch API?

O Fetch API é uma interface moderna de JavaScript fornecida pelos navegadores da web para fazer requisições HTTP e lidar com respostas. É um substituto mais flexível e poderoso para a antiga API XMLHttpRequest, que era tradicionalmente usada para fazer requisições assíncronas em JavaScript.

Enquanto o Fetch API pode lidar com diferentes tipos de requisições HTTP, incluindo GET, POST, PUT, DELETE, etc., é particularmente útil para fazer requisições POST, que são comumente usadas para enviar dados a um servidor.

Ao fazer uma requisição POST usando o Fetch API, você pode incluir o corpo da requisição, que contém os dados que deseja enviar ao servidor. O corpo pode estar em vários formatos, como JSON, FormData ou texto simples.

Como Enviar Requisições Fetch POST com JavaScript?

Passo 1: Configurando a requisição

• Especificar a URL do endpoint do servidor para enviar dados. Endpoints lidam com requisições POST e os dados acompanhantes.
• Definir o método HTTP como POST usando a propriedade method nas opções da requisição para fetch().
• Incluir informações adicionais, como tipo de conteúdo nos cabeçalhos da requisição, usando a propriedade headers como um objeto.
• O corpo da requisição contém os dados a serem enviados ao servidor. Utilize o formato JSON (Notação de Objetos JavaScript) convertendo um objeto JavaScript em uma string JSON com JSON.stringify().

Passo 2: Iniciar a Requisição

Use a função fetch() para iniciar a requisição POST.

Passo 3: Lidar com a Resposta

• A promessa fetch() resolve para um objeto Response em caso de sucesso. Lide com isso usando .then().
• Verifique response.ok para códigos de status de erro, como 400 ou 500. Lance um erro para lidar com falhas.
• Analise o corpo da resposta JSON em um objeto JavaScript usando response.json().

Passo 4: Lidar com Erros

Use .catch() para lidar com erros durante a requisição, como problemas de rede ou servidor.

Exemplo Completo: Criar um Item Todo

const url = 'https://api.example.com/todos';
const data = { 
  title: 'Comprar mantimentos',
  completed: false
};

const jsonData = JSON.stringify(data);

const headers = new Headers();
headers.append('Content-Type', 'application/json');

fetch(url, {
  method: 'POST', 
  headers: headers,
  body: jsonData
})
.then(response => {
  if (!response.ok) {
    throw new Error(`Erro HTTP! status: ${response.status}`);
  }
  return response.json();
})
.then(responseData => {
  console.log('Todo criado com sucesso:', responseData);  
})
.catch(error => {
  console.error('Erro:', error);
});

Este código JavaScript envia uma requisição POST para criar um novo item todo com um título e status de conclusão. Demonstra a configuração da requisição, enviando-a com fetch(), lidando com a resposta e erros.

Apidog - Uma Ferramenta Poderosa de API para Criar Requisições Fetch POST

Apidog, uma plataforma de desenvolvimento de API com foco em design, pode ser a melhor amiga de um desenvolvedor de API. Você pode construir requisições Fetch POST com o Apidog - e testá-las, simular e documentá-las após projetá-las!

Gerando Código Fetch Usando Apidog

Você pode utilizar o recurso de geração de código cliente do Apidog para fornecer a você estruturas de código da Fetch API.

Em qualquer API ou requisição, você pode localizar e pressionar o botão </>, e prosseguir pressionando o botão Gerar Código Cliente, conforme mostrado na imagem acima.

Com o Apidog, você pode criar código cliente Fetch. Tudo que você precisa fazer a seguir é copiar e colar o código na sua plataforma de programação.

Criar e Testar uma Requisição Fetch POST Usando Apidog

Comece a construir sua própria requisição Fetch POST com o Apidog seguindo os passos abaixo. No Apidog, os parâmetros do corpo da requisição POST incluem dados JSON, dados de formulário, XML, etc.

Comece criando uma nova requisição HTTP POST no Apidog. Insira uma URL de API REST apropriada. Você pode usar uma combinação de parâmetros de caminho e de consulta, juntamente com múltiplos IDs para criar uma URL de API mais específica.

Enviar dados JSON em uma requisição POST

Apesar da entrada manual dos seus dados JSON, o Apidog também suporta a geração automática de corpos de requisições JSON a partir de modelos, economizando tempo e garantindo estruturas JSON consistentes.

Aqui está um guia detalhado de dados JSON para POST para você, confira agora.

Enviar dados de formulário em uma requisição POST

Em certos casos, é necessário enviar dados com o tipo de conteúdo de parâmetros de formulário. O Apidog simplifica esse processo. Como um cliente de API fácil de usar, o Apidog permite que você inclua facilmente dados de formulário no corpo da requisição ao testar APIs. Você pode especificar o tipo de conteúdo para cada parâmetro, tornando conveniente enviar requisições de formulário.

Enviar arquivos em uma requisição POST

Ao testar APIs, é comum precisar enviar arquivos como parte da requisição. No Apidog, você pode facilmente enviar arquivos para teste criando uma nova requisição e navegando até a aba "Corpo". Você pode clicar no botão "Enviar" para escolher qual arquivo deseja enviar no Apidog.

Uma vez que você terminar de incluir todos os parâmetros da requisição, você pode salvar a API POST clicando no botão Salvar.

Para garantir que sua requisição POST seja responsiva, clique no botão Enviar para testar uma requisição.

Se sua requisição for enviada com sucesso, você deverá receber uma resposta, como mostrado na parte inferior da imagem acima.

Conclusão

As requisições Fetch POST são uma combinação das vantagens da Fetch API com as requisições POST, permitindo que os desenvolvedores de API enviem dados para servidores de maneira limpa e moderna. Elas oferecem benefícios como:

• Sintaxe mais simples em comparação com métodos mais antigos (XHR).
• Melhoria da leiturae com uma separação clara de responsabilidades.
• Recursos integrados para uma manipulação mais fácil de respostas e erros.

Se você está trabalhando com JavaScript, o uso da Fetch API para requisições POST é geralmente recomendado devido à sua abordagem moderna e recursos amigáveis para desenvolvedores.

Ao tentar encontrar uma ferramenta de API que seja apropriada para o design de requisições Fetch POST, você pode considerar usar Apidog. Além das funcionalidades de construção genéricas, o Apidog facilita o teste, simulação e documentação de APIs - tudo gratuitamente! Você também pode contar com o Apidog para ajudá-lo com a codificação da Fetch API se você não estiver tão confiante.