Como fazer POST com Fetch API

Neste artigo vou te mostrar como POST com Fetch API, vamos aplicar o recurso de forma fácil com o fetch.

Fala programador(a), beleza? Bora aprender mais sobre o recurso de Fetch API!

A Fetch API é uma maneira simples e fácil de realizar chamadas HTTP, como GET e POST, em sua aplicação JavaScript.

Neste artigo, mostraremos como usar a Fetch API para enviar dados via POST para um servidor.

Primeiro, certifique-se de ter incluído a biblioteca fetch em seu projeto. Se você estiver usando um navegador moderno, a Fetch API já deve estar disponível.

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Caso contrário, você pode incluir a biblioteca fetch como uma dependência em seu projeto.

Para fazer uma chamada POST com a Fetch API, você precisará passar alguns argumentos para o método fetch(). O primeiro argumento é a URL do endpoint ao qual você deseja enviar os dados.

O segundo argumento é um objeto que contém as configurações da chamada, como o método (POST), o corpo da mensagem e os cabeçalhos.

fetch('https://my-server.com/endpoint', {
  method: 'POST',
  body: JSON.stringify({
    key1: 'value1',
    key2: 'value2'
  }),
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))

No exemplo acima, estamos enviando uma chamada POST para o endpoint ‘https://my-server.com/endpoint‘ com o corpo da mensagem contendo as chaves ‘key1’ e ‘key2’ e seus valores correspondentes.

Também estamos definindo o tipo de conteúdo como ‘application/json’ nos cabeçalhos.

Em seguida, usamos o método then() para lidar com a resposta do servidor.

O método then() é chamado quando a chamada é bem-sucedida e retorna uma resposta.

Nós usamos o método json() para analisar a resposta em um objeto JSON.

Então usamos o método .then() para acessar a resposta e usamos o método .catch() para lidar com qualquer erro que possa ocorrer.

É importante notar que o corpo da mensagem deve ser passado como uma string.

No exemplo acima, usamos o método JSON.stringify() para converter o objeto JavaScript em uma string JSON.

Em resumo, a Fetch API é uma maneira simples e fácil de fazer chamadas HTTP, como POST, em sua aplicação JavaScript.

Use o método fetch() para fazer a chamada, passe os argumentos corretos e use os métodos then() e catch() para lidar com a resposta.

Deixe um comentário contando o que achou deste artigo 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Em conclusão, a Fetch API é uma ferramenta poderosa e fácil de usar para fazer chamadas HTTP, como POST, em sua aplicação JavaScript.

Com o uso dos métodos fetch(), then() e catch(), é possível enviar dados para um servidor e lidar com as respostas de forma eficiente.

Além disso, é possível passar configurações adicionais, como cabeçalhos e corpo da mensagem, para personalizar a chamada.

Ao seguir as etapas descritas neste artigo, você estará pronto para enviar dados para um servidor usando a Fetch API em sua próxima aplicação.

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!