Como fazer POST com x-www-form-urlencoded em Fetch

Neste artigo você vai aprender a como fazer um POST com x-www-form-urlencoded em Fetch, vamos utilizar uma simples abordagem

Fala programador(a), beleza? Bora aprender mais sobre Fetch!

O Fetch API é uma maneira moderna e mais fácil de realizar requisições HTTP no navegador.

Ele é uma alternativa ao XMLHttpRequest tradicional, e é compatível com a maioria dos navegadores atualmente.

Neste artigo, vamos ver como fazer um POST x-www-form-urlencoded usando o Fetch API.

Primeiro, você precisa criar um objeto Request:

const requestOptions = {
  method: 'POST',
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  body: new URLSearchParams({ name: 'John', job: 'Developer' }).toString()
};

const request = new Request('https://example.com', requestOptions);

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Em seguida, você pode usar o método fetch para enviar a requisição:

fetch(request)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

Note que a opção headers é usada para definir o tipo de conteúdo da requisição como application/x-www-form-urlencoded.

A opção body é usada para definir os dados a serem enviados na requisição.

Neste caso, estamos usando URLSearchParams para codificar os dados como string x-www-form-urlencoded.

E é isso! Agora você sabe como fazer um POST x-www-form-urlencoded com o Fetch API.

Lembre-se de tratar erros e exceções adequadamente, para garantir uma boa experiência do usuário.

Quais as vantagens de usar a Fetch API?

A Fetch API possui várias vantagens em relação a outras formas de realizar requisições HTTP no navegador:

1. Fácil de usar: A Fetch API é mais fácil de usar e compreender do que o XMLHttpRequest tradicional, o que a torna uma escolha popular para desenvolvedores.
2. Suporte a Promessas: A Fetch API é baseada em Promessas, o que significa que você pode facilmente manipular a resposta da requisição de uma forma síncrona e legível.
3. Abordagem moderna: A Fetch API é uma abordagem mais moderna e atual para realizar requisições HTTP no navegador, e é compatível com a maioria dos navegadores atualmente.
4. Cabeçalhos de requisição: A Fetch API permite que você envie cabeçalhos de requisição, o que pode ser útil para autenticação ou outras tarefas.
5. Interrupção de requisição: A Fetch API permite que você interrompa uma requisição, o que pode ser útil em situações onde o usuário cancela uma ação antes de a requisição ser concluída.

Em resumo, a Fetch API oferece uma maneira fácil, moderna e eficiente de realizar requisições HTTP no navegador, tornando-a uma escolha popular para desenvolvedores.

Deixe um comentário sobre o que achou deste artigo! 🙂

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

Conclusão

Em conclusão, o Fetch API é uma maneira moderna e eficiente de realizar requisições HTTP no navegador.

Ao usar o Fetch API, você pode facilmente fazer uma requisição POST x-www-form-urlencoded, como mostrado neste artigo.

Ao criar um objeto Request e usar o método fetch, você pode enviar seus dados de forma segura e eficiente.

É importante lembrar de tratar erros e exceções adequadamente para garantir uma boa experiência do usuário.

Ao seguir estas etapas, você pode facilmente implementar requisições HTTP em seu aplicativo web.

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!

Prefere async/await? A mesma requisição fica assim:

async function enviar() { try { const response = await fetch(‘https://example.com’, { method: ‘POST’, headers: { ‘Content-Type’: ‘application/x-www-form-urlencoded’ }, body: new URLSearchParams({ name: ‘John’, job: ‘Developer’ }).toString() }) const data = await response.json() console.log(data) } catch (error) { console.error(error) } }

Repara que aqui eu nem criei o objeto Request separado, passei a URL e as options direto pro fetch

Fica mais enxuto e é o jeito que a galera mais usa no dia a dia

Erros comuns ao enviar x-www-form-urlencoded:

Tome cuidado com esses tropeços, já me ferrei com alguns deles

Content-Type errado: se o cabeçalho não for application/x-www-form-urlencoded, o backend pode tentar ler o corpo de outro jeito e a requisição quebra

Confundir com JSON: x-www-form-urlencoded não é application/json, aqui não entra JSON.stringify, quem codifica é o URLSearchParams

Quando usar URLSearchParams e quando usar FormData?

URLSearchParams é o que você quer pro x-www-form-urlencoded, ele monta os dados no formato chave=valor separado por &, igualzinho a query string de uma URL

FormData já é outra pegada, ele gera multipart/form-data e é o indicado quando você precisa mandar arquivo junto na requisição

Resumo da ópera: dado simples de formulário vai de URLSearchParams, upload de arquivo vai de FormData