Envoi de données avec FormData, React Query et Axios Instance

dans le développement Web moderne, il est crucial de gérer efficacement la soumission des données. Cet article vous guidera tout au long du processus d'envoi de données à l'aide de FormData, React Query et de l'instance Axios dans une application React.

Présentation
Lors de la création d'applications Web, vous devez souvent envoyer des données à un serveur. Cela peut être fait à l'aide de différentes méthodes, mais l'utilisation conjointe de FormData, React Query et de l'instance Axios offre une approche puissante et flexible. FormData vous permet de construire un ensemble de paires clé/valeur représentant les champs de formulaire et leurs valeurs, qui peuvent être facilement envoyées à l'aide d'Axios. React Query simplifie la récupération des données et la gestion de l'état, facilitant ainsi la gestion des données côté serveur.

Mise en place du projet
Tout d'abord, configurons un nouveau projet React et installons les dépendances nécessaires.

bash
npx create-react-app formdata-react-query-axios
cd formdata-react-query-axios
npm installe axios réagir-query
Création d'une instance Axios
La création d'une instance Axios vous permet de configurer les paramètres par défaut pour toutes vos requêtes HTTP, tels que l'URL de base et les en-têtes.

javascript
// src/api/axiosInstance.js
importer des axios depuis 'axios' ;

const axiosInstance = axios.create({
baseURL : 'https://api.example.com',
en-têtes : {
'Content-Type' : 'multipart/form-data',
},
});

exporter l'axiosInstance par défaut ;
Configuration de la requête React
React Query fournit des hooks pour récupérer, mettre en cache et mettre à jour les données. Pour utiliser React Query, enveloppez votre application avec QueryClientProvider.

javascript
// src/index.js
importer React depuis 'react';
importer ReactDOM depuis 'react-dom';
importer { QueryClient, QueryClientProvider } depuis 'react-query';
importer l'application depuis './App' ;

const queryClient = new QueryClient();

ReactDOM.render(


,
document.getElementById('root')
);
Création d'un composant de formulaire
Ensuite, créez un composant de formulaire qui utilise FormData pour envoyer des données.

javascript
// src/components/MonFormulaire.js
importer React, { useState } depuis 'react';
importer { useMutation } depuis 'react-query';
importer axiosInstance depuis '../api/axiosInstance';

const MonFormulaire = () => {
const [fichier, setFile] = useState(null);

const mutation = useMutation((formData) => {
return axiosInstance.post('/upload', formData);
});

const handleSubmit = (événement) => {
event.preventDefault();
const formData = new FormData();
formData.append('fichier', fichier);

mutation.mutate(formData);

};

retour (

type="fichier"
onChange={(e) => setFile(e.target.files[0])}
/>
Télécharger

);
} ;

exporter MyForm par défaut ;
Gestion de la soumission du formulaire
Dans le composant Form, gérez la soumission du formulaire en créant un objet FormData et en y ajoutant le fichier. Utilisez le hook useMutation de React Query pour envoyer les données à l'aide de l'instance Axios.

javascript
const handleSubmit = (événement) => {
event.preventDefault();
const formData = new FormData();
formData.append('fichier', fichier);

mutation.mutate(formData);
};
Conclusion
En combinant FormData, React Query et l'instance Axios, vous pouvez gérer efficacement la soumission de données dans vos applications React. Cette approche offre de la flexibilité et simplifie le processus d'envoi de données à un serveur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!