Publication de données de formulaire avec l'API Fetch

Lorsque vous utilisez l'API Fetch pour soumettre des données de formulaire, il existe deux formats principaux à prendre en compte :

Multipart/ Form-Data

Lors de l'utilisation de FormData pour construire le corps de la requête, les données seront automatiquement envoyées au format multipart/form-data. Il s'agit d'un comportement par défaut de FormData et ne peut pas être modifié.

Application/x-www-form-urlencoded

Pour envoyer les données au format application/x-www-form-urlencoded, vous avez quelques options :

1. Chaîne codée en URL :

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

2. Objet URLSearchParams : 

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

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

Notez que la spécification de l'en-tête Content-Type n'est pas nécessaire lors de l'utilisation de URLSearchParams, car elle définit automatiquement le type de contenu correct.

3. URLSearchParams de FormData :

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

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

Cette option permet de passer directement l'objet FormData pour créer l'objet URLSearchParams. Cependant, sa prise en charge par les navigateurs peut être limitée, alors assurez-vous de le tester minutieusement avant de l'utiliser.