Axios : concevoir une requête Post pour renvoyer les données d'un formulaire.
Axios est une bibliothèque JavaScript fonctionnant comme un client HTTP. Elle permet de communiquer avec des API en utilisant des requêtes. Comme avec les autres clients HTTP, il est possible de créer des requêtes avec la méthode POST.
La principale difficulté dans les requêtes POST est l'ajout de paramètres. On ne peut pas inclure directement les paramètres dans l'URL, comme dans une requête de type GET. Pour ajouter des paramètres, on utilise l'API FormData. Cet API permet d'ajouter des données en JavaScript de la même manière qu'un formulaire que l'on validerait en HTML. Il faut d'abord créer un objet de la classe "FormData" avec le constructeur.
var mesDonnees = new FormData();
Pour ajouter des données, on peut utiliser les méthodes "set()" et "append()". Les deux méthodes se servent des mêmes paramètres, le nom suivi de la valeur. La différence entre les deux méthodes se situe lors de la gestion d'une donnée qui a déjà le même nom. Avec "append()", la nouvelle valeur sera ajoutée à la suite de la valeur précédente. Cela formera alors un tableau de données. Avec "set()", la nouvelle valeur remplace la précédente.
//Ajout d'une valeur
mesDonnees.set("prenom", "Alfred");
//On peut aussi indiquer en deuxième paramètre un fichier
mesDonnees.append("image", fichier);
Une fois les données créées, on peut appeler la fonction "axios()" pour envoyer la requête. On indique la méthode POST dans le paramètre "method". Les données sont alors stockées dans le paramètre "data". La librairie Axios utilise les promesses. On traite la réponse avec la méthode "then()" et les erreurs avec la méthode "catch()".
axios({
method: 'post',
url: 'url',
data: mesDonnees
})
.then(function (reponse) {
//On traite la suite une fois la réponse obtenue
console.log(reponse);
})
.catch(function (erreur) {
//On traite ici les erreurs éventuellement survenues
console.log(erreur);
});