Senden von Daten mit FormData, React Query und Axios Instance

n der modernen Webentwicklung ist die effiziente Handhabung der Datenübermittlung von entscheidender Bedeutung. Dieser Artikel führt Sie durch den Prozess des Sendens von Daten mithilfe von FormData, React Query und der Axios-Instanz in einer React-Anwendung.

Einführung
Beim Erstellen von Webanwendungen müssen Sie häufig Daten an einen Server senden. Dies kann mit verschiedenen Methoden erfolgen, aber die gemeinsame Verwendung von FormData, React Query und Axios-Instanz bietet einen leistungsstarken und flexiblen Ansatz. Mit FormData können Sie eine Reihe von Schlüssel/Wert-Paaren erstellen, die Formularfelder und ihre Werte darstellen und problemlos mit Axios gesendet werden können. React Query vereinfacht den Datenabruf und die Statusverwaltung und erleichtert so den Umgang mit serverseitigen Daten.

Einrichten des Projekts
Lassen Sie uns zunächst ein neues React-Projekt einrichten und die erforderlichen Abhängigkeiten installieren.

Bash
npx create-react-app formdata-react-query-axios
cd formdata-react-query-axios
npm install axios React-Query
Erstellen einer Axios-Instanz
Durch das Erstellen einer Axios-Instanz können Sie Standardeinstellungen für alle Ihre HTTP-Anfragen konfigurieren, z. B. Basis-URL und Header.

Javascript
// src/api/axiosInstance.js
Axios aus 'Axios' importieren;

const axiosInstance = axios.create({
BasisURL: 'https://api.example.com',
Überschriften: {
'Content-Type': 'multipart/form-data',
},
});

Standard-AxiosInstance exportieren;
Reaktionsabfrage einrichten
React Query bietet Hooks zum Abrufen, Zwischenspeichern und Aktualisieren von Daten. Um React Query zu verwenden, umschließen Sie Ihre Anwendung mit dem QueryClientProvider.

Javascript
// src/index.js
import React from 'react';
ReactDOM aus 'react-dom' importieren;
import { QueryClient, QueryClientProvider } from 'react-query';
App aus './App' importieren;

const queryClient = new QueryClient();

ReactDOM.render(


,
document.getElementById('root')
);
Erstellen einer Formularkomponente
Erstellen Sie als Nächstes eine Formularkomponente, die FormData zum Senden von Daten verwendet.

Javascript
// src/components/MyForm.js
import React, { useState } from 'react';
import { useMutation } from 'react-query';
axiosInstance aus '../api/axiosInstance' importieren;

const MyForm = () => {
const [file, setFile] = useState(null);

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

const handleSubmit = (event) => {
event.preventDefault();
const formData = new FormData();
formData.append('file', file);

mutation.mutate(formData);

};

zurück (

Standard-MyForm exportieren;
Bearbeitung der Formularübermittlung
Behandeln Sie in der Formularkomponente die Formularübermittlung, indem Sie ein FormData-Objekt erstellen und die Datei daran anhängen. Verwenden Sie den useMutation-Hook von React Query, um die Daten über die Axios-Instanz zu senden.

Javascript
const handleSubmit = (event) => {
event.preventDefault();
const formData = new FormData();
formData.append('file', file);

mutation.mutate(formData);
};
Fazit
Durch die Kombination von FormData, React Query und Axios-Instanz können Sie die Datenübermittlung in Ihren React-Anwendungen effizient verwalten. Dieser Ansatz bietet Flexibilität und vereinfacht das Senden von Daten an einen Server.

Das obige ist der detaillierte Inhalt vonSenden von Daten mit FormData, React Query und Axios Instance. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!