Postar dados de formulário com API Fetch

Ao utilizar a API Fetch para enviar dados de formulário, há dois formatos principais a serem considerados:

Multipart/ Form-Data

Ao usar FormData para construir o corpo da solicitação, os dados serão enviados automaticamente no formato multipart/form-data. Este é um comportamento padrão do FormData e não pode ser modificado.

Application/x-www-form-urlencoded

Para enviar os dados no formato application/x-www-form-urlencoded, você tem algumas opções:

1. String codificada em URL:

fetch("api/xxx", {
    body: "[email protected]&password=pw",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
    },
    method: "post",
});

2. Objeto URLSearchParams:

const data = new URLSearchParams();
data.append("email", "[email protected]");
data.append("password", "mypassword");

fetch("api/xxx", {
    body: data,
    method: "post",
});

Observe que a especificação do cabeçalho Content-Type não é necessária ao usar URLSearchParams, pois ele define automaticamente o tipo de conteúdo correto.

3. URLSearchParams de FormData:

const data = new URLSearchParams(new FormData(formElement));

fetch("api/xxx", {
    body: data,
    method: "post",
});

Esta opção permite que você passe o objeto FormData diretamente para criar o objeto URLSearchParams. No entanto, ele pode ter suporte limitado ao navegador, portanto, teste-o completamente antes de usá-lo.