POST, PUT dan DELETE dengan Axios
Hantar data kepada API menggunakan POST dan PUT Axios, kendalikan respons untuk mengemas kini keadaan setempat dan laksanakan tindakan padam yang mengalih keluar item daripada pelayan serta senarai.
POST, PUT dan DELETE dengan Axios ialah pelajaran React Native Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran React Native Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.
Operasi CRUD dengan Axios
Selain mendapatkan data, kebanyakan aplikasi perlu mencipta, mengemas kini dan memadam sumber pada pelayan. Axios menyediakan kaedah axios.post, axios.put, axios.patch dan axios.delete yang dipetakan terus kepada kata kerja HTTP. Setiap kaedah mengembalikan Promise yang diselesaikan kepada respons pelayan.
POST: Mencipta Sumber Baharu
axios.post(url, data) menghantar badan permintaan sebagai JSON untuk mencipta sumber baharu. Argumen kedua ialah objek badan permintaan — Axios mengekodkannya secara automatik kepada JSON dan menetapkan pengepala Content-Type: application/json. Pelayan biasanya memberikan respons dengan sumber yang dicipta, termasuk ID yang diberikan kepadanya.
const createPost = async (title, body) => {
const response = await axios.post(
'https://jsonplaceholder.typicode.com/posts',
{ title, body, userId: 1 }
);
console.log('Created:', response.data);
// { id: 101, title: '...', body: '...', userId: 1 }
return response.data;
};Menambah Item Baharu pada State Selepas POST
Selepas POST berjaya, tambahkan item yang dikembalikan kepada tatasusunan state tempatan anda supaya penciptaan itu dipaparkan tanpa mendapatkan semula semua data. Gunakan bentuk fungsi setState untuk menggabungkan item baharu dengan tatasusunan sedia ada dengan selamat. ID yang diberikan oleh pelayan digunakan sebagai kunci unik dalam render seterusnya.
const handleCreate = async (formData) => {
try {
const response = await axios.post('/posts', formData);
const newPost = response.data;
setPosts((prev) => [newPost, ...prev]);
} catch (err) {
setError('Failed to create post');
}
};PUT: Menggantikan Sumber Lengkap
axios.put(url, data) menggantikan keseluruhan sumber dengan data yang diberikan. Sertakan ID sumber dalam URL dan hantarkan semua medan dalam badan permintaan. PUT bersifat idempoten — memanggilnya beberapa kali dengan data yang sama menghasilkan keputusan yang sama. Gunakan PUT apabila anda menggantikan keseluruhan sumber, bukan sekadar mengemas kini beberapa medan.
const updatePost = async (postId, updatedData) => {
const response = await axios.put(
'/posts/' + postId,
updatedData
);
return response.data;
};PATCH: Kemas Kini Separa
axios.patch(url, data) hanya menghantar medan yang berubah dan bukannya keseluruhan sumber. Cara ini lebih cekap daripada PUT apabila anda mengemas kini satu medan (seperti avatar pengguna atau tajuk hantaran). Banyak API REST menyokong PUT dan PATCH — semak dokumentasi API untuk mengetahui kaedah yang diperlukan.
// Only update the title, leave other fields untouched
const patchPostTitle = async (postId, newTitle) => {
const response = await axios.patch(
'/posts/' + postId,
{ title: newTitle }
);
return response.data;
};Mengemas Kini State Selepas PUT/PATCH
Selepas kemas kini berjaya, gantikan item lama dalam tatasusunan state dengan versi yang dikembalikan oleh pelayan. Gunakan Array.map untuk mengulangi state dan menggantikan item yang sepadan. Ini memastikan state tempatan segerak dengan pelayan tanpa mendapatkan semula semua data.
const handleUpdate = async (postId, updatedData) => {
try {
const response = await axios.put('/posts/' + postId, updatedData);
const updatedPost = response.data;
setPosts((prev) =>
prev.map((p) => (p.id === postId ? updatedPost : p))
);
} catch (err) {
setError('Failed to update post');
}
};DELETE: Memadam Sumber
axios.delete(url) mengalih keluar sumber pada URL yang diberikan. Kebanyakan API mengembalikan respons 200 atau 204 (Tiada Kandungan) apabila pemadaman berjaya. Berbeza daripada POST dan PUT, DELETE tidak menghantar badan permintaan. Argumen ketiga kepada axios.delete boleh menghantar pilihan konfigurasi seperti pengepala pengesahan.
const deletePost = async (postId) => {
await axios.delete('/posts/' + postId);
console.log('Post deleted');
};Mengalih Keluar Item daripada State Selepas DELETE
Selepas DELETE berjaya, tapis item itu daripada tatasusunan keadaan setempat dengan Array.filter. UI dikemas kini serta-merta tanpa perlu membuat perjalanan pergi balik untuk mengambil semula seluruh senarai. Jika DELETE gagal, ralat ditangkap dan item itu kekal dalam keadaan — sambil mesej ralat dipaparkan kepada pengguna.
const handleDelete = async (postId) => {
try {
await axios.delete('/posts/' + postId);
setPosts((prev) => prev.filter((p) => p.id !== postId));
} catch (err) {
setError('Failed to delete post');
}
};Kemas Kini Optimistik
Kemas kini optimistik mengemas kini keadaan setempat serta-merta (sebelum pelayan mengesahkannya) supaya UI terasa pantas. Jika permintaan gagal, kembalikan keadaan kepada keadaan asal dan paparkan ralat. Corak ini digunakan oleh butang suka Twtter dan fungsi padam Gmail — tindakan terasa serta-merta walaupun sambungan perlahan.
const handleDelete = async (postId) => {
const originalPosts = posts;
// Update immediately
setPosts((prev) => prev.filter((p) => p.id !== postId));
try {
await axios.delete('/posts/' + postId);
} catch (err) {
// Revert on failure
setPosts(originalPosts);
setError('Delete failed. Please try again.');
}
};Memuat Naik Fail dengan FormData
Untuk memuat naik imej atau fail melalui POST, cipta objek FormData, tambah fail menggunakan format URI React Native, kemudian hantarkannya kepada axios.post. Tetapkan pengepala Content-Type kepada multipart/form-data supaya pelayan menghuraikannya dengan betul sebagai muat naik fail dan bukannya JSON.
const uploadAvatar = async (imageUri) => {
const formData = new FormData();
formData.append('avatar', {
uri: imageUri,
name: 'avatar.jpg',
type: 'image/jpeg',
});
const response = await axios.post('/user/avatar', formData, {
headers: { 'Content-Type': 'multipart/form-data' },
});
return response.data.avatarUrl;
};Merantai Mutasi: Cipta Kemudian Navigasi
Selepas POST atau PUT berjaya, anda biasanya mahu menavigasikan pengguna ke skrin butiran sumber yang baru dicipta. Rantaikan panggilan navigasi selepas kemas kini keadaan dalam laluan kejayaan try/catch anda. Hantar ID sumber baharu atau objek penuh sebagai parameter navigasi.
const handleCreatePost = async (formData) => {
try {
const response = await axios.post('/posts', formData);
const newPost = response.data;
setPosts((prev) => [newPost, ...prev]);
navigation.navigate('PostDetail', { postId: newPost.id });
} catch (err) {
setError('Failed to create post');
}
};Semakan Pantas
Uji pemahaman anda tentang permintaan POST, PUT dan DELETE dengan Axios daripada pelajaran ini.
Imbas Kembali Pelajaran
Dalam pelajaran ini, anda telah mempelajari bahawa: axios.post menghantar badan JSON untuk mencipta sumber dan mengembalikan item yang dicipta daripada pelayan, axios.put/patch menggantikan atau mengemas kini sebahagian sumber — kemas kini keadaan dengan Array.map selepas berjaya, dan axios.delete mengalih keluar sumber — kemas kini keadaan dengan Array.filter dan gunakan kemas kini optimistik untuk pengalaman pengguna yang pantas. Seterusnya, kita akan meneroka Redux Toolkit untuk mengurus keadaan aplikasi yang kompleks.
Pelajari JavaScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Soalan Lazim
Adakah pelajaran “POST, PUT dan DELETE dengan Axios” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran React Native Academy, termasuk “POST, PUT dan DELETE dengan Axios”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus React Native Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “POST, PUT dan DELETE dengan Axios”?
Hantar data kepada API menggunakan POST dan PUT Axios, kendalikan respons untuk mengemas kini keadaan setempat dan laksanakan tindakan padam yang mengalih keluar item daripada pelayan serta senarai. Anda berlatih React Native Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan React Native Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran React Native Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.
Berapa lamakah pelajaran “POST, PUT dan DELETE dengan Axios” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran React Native Academy ini?
Ya. Setiap pelajaran React Native Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Cangkuk useEffect dan Tatasusunan Kebergantungan
- Membuat Permintaan GET dengan Axios
- Mengendalikan Keadaan Pemuatan dan Ralat
- POST, PUT dan DELETE dengan Axios