Publicar datos de formulario con Fetch API

Al utilizar Fetch API para enviar datos de formulario, hay dos formatos principales a considerar:

Multipart/ Form-Data

Cuando se utiliza FormData para construir el cuerpo de la solicitud, los datos se enviarán automáticamente en el formato multiparte/form-data. Este es un comportamiento predeterminado de FormData y no se puede modificar.

Application/x-www-form-urlencoded

Para enviar los datos en formato application/x-www-form-urlencoded, debe tiene algunas opciones:

1. Cadena codificada en 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",
});

Tenga en cuenta que no es necesario especificar el encabezado Content-Type cuando se utiliza URLSearchParams, ya que establece automáticamente el tipo de contenido correcto.

3. URLSearchParams de FormData:

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

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

Esta opción le permite pasar el objeto FormData directamente para crear el objeto URLSearchParams. Sin embargo, es posible que tenga compatibilidad limitada con el navegador, así que asegúrese de probarlo minuciosamente antes de usarlo.