Bagaimana untuk menghantar pemadaman axios dalam JavaScript ke belakang ReactJS

Apakah Send Axios Delete?

Mengalih keluar data dari bahagian belakang menggunakan ReactJS dan Axios boleh menjadi tugas yang mencabar. Walau bagaimanapun, dengan pendekatan dan pengetahuan yang betul, anda boleh menyelesaikan tugas ini dengan mudah. Dalam artikel ini, kami akan meneroka cara menghantar permintaan pemadaman Axios ke bahagian belakang dalam ReactJS menggunakan JavaScript. Kami akan melalui dua pendekatan berbeza dengan kod dan penjelasan, serta dua contoh yang berfungsi. Jadi, mari mulakan!

Algoritma

Sebelum kita memulakan perbincangan kita, adalah penting untuk memahami proses menghantar permintaan pemadaman Axios ke bahagian belakang apabila menggunakan ReactJS. Berikut adalah langkah-langkahnya -

• Merge Axios - Mesti termasuk Axios, perpustakaan popular untuk petisyen HTTP palsu.

• Membina permintaan yang jelas - Anda kemudiannya akan menggunakan Axios untuk memulakan permintaan yang jelas. Ini memerlukan penentuan Uniform Resource Locator (URL), pengepala (jika ada) dan sebarang data yang perlu dipindahkan ke pelayan.

• Hantar Permintaan - Secara ringkasnya, anda akan menggunakan Axios untuk menghantar permintaan yang jelas kepada pelayan.

Kaedah 1: Gunakan kaedah pemadaman aksios

Kaedah pertama melibatkan penggunaan kaedah padam Axios. Inilah kodnya -

import axios from 'axios';
const deleteData = async (id) => {
   try {
      const response = await axios.delete(`https://example.com/api/data/${id}`);
      console.log(response.data);
   } catch (error) {
      console.error(error);
   }
};

Dalam kod di atas, kami mentakrifkan fungsi yang dipanggil deleteData, yang mengambil parameter id. Di dalam fungsi, kami menggunakan kaedah padam axios untuk menghantar permintaan padam ke pelayan. URL yang kami sasarkan mengandungi parameter id, yang mewakili data yang ingin kami padamkan. Jika permintaan itu berjaya, kami log data respons ke konsol. Jika ralat berlaku, kami log ralat itu ke konsol.

Contoh

Dalam contoh ini, kami akan mencipta butang padam yang boleh diklik untuk memadam data. Inilah kodnya -

import React from 'react';
import axios from 'axios';
const DeleteButton = ({ id }) => {
   const handleDelete = async () => {
      try {
         const response = await axios.delete(`https://example.com/api/data/${id}`);
         console.log(response.data);
      } catch (error) {
         console.error(error);
      }
   };
   return (
      <button onClick={handleDelete}>
         Delete
      </button>
   );
};
export default DeleteButton;

Kod di atas menggambarkan komponen yang dipanggil "DeleteButton" yang membenarkan penerimaan atribut id untuk membina URL permintaan padam. Apabila butang padam diklik, fungsi handleDelete akan dipanggil, yang menggunakan kaedah padam Axios untuk menghantar permintaan padam kepada pelayan dan menentukan id yang berkaitan. Selepas permintaan berjaya, data respons akan dilog masuk ke dalam konsol. Sebaliknya, jika sebarang ralat berlaku, ralat itu juga dilog masuk ke dalam konsol.

Kaedah 2: Gunakan kaedah permintaan axios

Alternatifnya memerlukan penggunaan proses permintaan Axios dan tetapan atribut "padam" bagi atribut kaedah. Berikut ialah coretan kod yang sepadan -

// Import Axios library
const axios = require('axios');

// Define a function to delete data
async function deleteData(id) {
   try {
   
      // Make a DELETE request to the API with the given ID
      const response = await axios({
         url: 'https://example.com/api/data/' + id,
         method: 'delete'
      });
      console.log(response.data);
   } catch (error) {
   
      // Log any errors that occur
      console.error(error);
   }
}

Dalam kod ini, kami mentakrifkan fungsi deleteData yang sama seperti kaedah pertama. Walau bagaimanapun, daripada menggunakan kaedah padam Axios, kami menggunakan kaedah permintaan Axios dan menetapkan atribut kaedah kepada "Padam". Jika permintaan itu berjaya, kami log data respons ke konsol. Jika ralat berlaku, kami log ralat itu ke konsol.

Memandangkan kita telah merangkumi kedua-dua kaedah dengan kod dan penjelasan, mari lihat dua contoh yang berkesan tentang cara menghantar permintaan pemadaman Axios ke bahagian belakang dalam ReactJS.

Contoh: Padam mod pengesahan

Dalam contoh ini, kami akan mencipta mod pengesahan padam untuk memadam data selepas pengesahan. Berikut adalah kodnya.

import React, { useState } from 'react';
import axios from 'axios';
const DeleteConfirmationModal = ({ id }) => {
   const [isOpen, setIsOpen] = useState(false);
   const handleDelete = async () => {
      try {
         const response = await axios.delete(`https://example.com/api/data/${id}`);
         console.log(response.data);
      } catch (error) {
         console.error(error);
      }
      setIsOpen(false);
   };

   return (
      <>
      <button onClick={() => setIsOpen(true)}>
         Delete
      </button>
      {isOpen && (
         <div>
            <p>Are you sure you want to delete this data?</p>
            <button onClick={handleDelete}>
               Yes, delete it
            </button>
            <button onClick={() => setIsOpen(false)}>
               Cancel
            </button>
         </div>
      )}
      </>
   );
};

export default DeleteConfirmationModal;

OUTPUT

Kod di atas mengandungi komponen yang dipanggil DeleteConfirmationModal, yang menerima atribut id. Apabila anda mengklik butang padam, mod pengesahan akan muncul. Jika pengguna mengesahkan pemadaman, fungsi handleDelete dilaksanakan. Fungsi ini menggunakan kaedah padam axios untuk menghantar permintaan padam kepada pelayan dan menentukan id. Selepas permintaan berjaya, data respons akan dilog masuk ke konsol. Sebaliknya, jika sebarang ralat berlaku, ralat itu juga dilog masuk ke dalam konsol. Ringkasnya, keadaan isOpen ditetapkan kepada palsu, dengan itu mematikan mod pengesahan.

KESIMPULAN

Dalam artikel ini, kami meneroka cara menghantar permintaan pemadaman Axios ke bahagian belakang dalam ReactJS menggunakan JavaScript. Kami membentangkan dua pendekatan berbeza dengan kod dan penjelasan, serta dua contoh yang berfungsi. Dengan mengikuti langkah-langkah yang digariskan dalam artikel ini, anda sepatutnya dapat memadamkan data dari bahagian belakang anda dengan mudah menggunakan ReactJS dan Axios.

Atas ialah kandungan terperinci Bagaimana untuk menghantar pemadaman axios dalam JavaScript ke belakang ReactJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!