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.
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!