Menghantar Data dengan FormData, React Query dan Axios Instance

dalam pembangunan web moden, pengendalian penyerahan data dengan cekap adalah penting. Artikel ini akan membimbing anda melalui proses penghantaran data menggunakan contoh FormData, React Query dan Axios dalam aplikasi React.

Pengenalan
Apabila membina aplikasi web, anda selalunya perlu menghantar data ke pelayan. Ini boleh dilakukan menggunakan pelbagai kaedah, tetapi menggunakan contoh FormData, React Query dan Axios bersama-sama menyediakan pendekatan yang berkuasa dan fleksibel. FormData membolehkan anda membina satu set pasangan kunci/nilai yang mewakili medan borang dan nilainya, yang boleh dihantar dengan mudah menggunakan Axios. React Query memudahkan pengambilan data dan pengurusan keadaan, menjadikannya lebih mudah untuk mengendalikan data sebelah pelayan.

Menyediakan Projek
Mula-mula, mari sediakan projek React baharu dan pasang kebergantungan yang diperlukan.

bash
npx create-react-app formdata-react-query-axios
cd formdata-react-query-axios
npm install axios react-query
Mencipta Instance Axios
Mencipta tika Axios membolehkan anda mengkonfigurasi tetapan lalai untuk semua permintaan HTTP anda, seperti URL asas dan pengepala.

javascript
// src/api/axiosInstance.js
import axios daripada 'axios';

const axiosInstance = axios.create({
baseURL: 'https://api.example.com',
pengepala: {
'Jenis-Kandungan': 'berbilang bahagian/data-bentuk',
},
});

eksport lalai axiosInstance;
Menyediakan Pertanyaan React
React Query menyediakan cangkuk untuk mengambil, menyimpan cache dan mengemas kini data. Untuk menggunakan React Query, bungkus aplikasi anda dengan QueryClientProvider.

javascript
// src/index.js
import React daripada 'react';
import ReactDOM daripada 'react-dom';
import { QueryClient, QueryClientProvider } daripada 'react-query';
import Apl daripada './App';

const queryClient = new QueryClient();

ReactDOM.render(


,
document.getElementById('root')
);
Mencipta Komponen Borang
Seterusnya, buat komponen borang yang menggunakan FormData untuk menghantar data.

javascript
// src/components/MyForm.js
import React, { useState } daripada 'react';
import { useMutation } daripada 'react-query';
import axiosInstance daripada '../api/axiosInstance';

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

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

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

mutation.mutate(formData);

};

kembali (

taip="fail"
onChange={(e) => setFile(e.target.files[0])}
/>
Muat naik

);
};

eksport Borang Saya lalai;
Mengendalikan Penyerahan Borang
Dalam komponen borang, kendalikan penyerahan borang dengan mencipta objek FormData dan tambahkan fail padanya. Gunakan cangkuk useMutation daripada React Query untuk menghantar data menggunakan tika Axios.

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

mutation.mutate(formData);
};
Kesimpulan
Dengan menggabungkan contoh FormData, React Query dan Axios, anda boleh mengendalikan penyerahan data dengan cekap dalam aplikasi React anda. Pendekatan ini memberikan fleksibiliti dan memudahkan proses penghantaran data ke pelayan.

Atas ialah kandungan terperinci Menghantar Data dengan FormData, React Query dan Axios Instance. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!