如何在JavaScript中將axios刪除發送到后端ReactJS-魔扣目錄

什么是發送 Axios 刪除？

使用 ReactJS 和 Axios 從后端刪除數據可能是一項具有挑戰性的任務。然而，憑借正確的方法和知識，您可以輕松完成此任務。在本文中，我們將探討如何使用 JavaScript 向 ReactJS 中的后端發送 Axios 刪除請求。我們將通過代碼和解釋來介紹兩種不同的方法，以及兩個工作示例。那么，讓我們開始吧！

算法

在開始我們的討論之前，了解使用 ReactJS 時向后端發送 Axios 刪除請求的過程至關重要。以下是步驟 –

合并 Axios – 必須包含 Axios，這是一個用于偽造 HTTP 請愿書的流行庫。

建立清除請求 – 隨后，您將使用 Axios 發起清除請求。這需要規定統一資源定位符（URL）、標頭（如果有）以及需要傳輸到服務器的任何數據。

發送請求 – 總之，您將使用 Axios 將清除請求發送到服務器。

方式一：使用axios刪除方法

第一種方法涉及使用 Axios 刪除方法。這是代碼 –

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);
   }
};

登錄后復制

在上面的代碼中，我們定義了一個名為deleteData的函數，它帶有一個id參數。在函數內部，我們使用axios的delete方法向服務器發送刪除請求。我們定位的 URL 包含 id 參數，它代表我們要刪除的數據。如果請求成功，我們會將響應數據記錄到控制臺。如果發生錯誤，我們會將錯誤記錄到控制臺。

示例

在此示例中，我們將創建一個刪除按鈕，單擊該按鈕即可刪除數據。這是代碼 –

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;

登錄后復制

上述代碼說明了一個名為“DeleteButton”的組件，該組件允許接受 id 屬性來建立刪除請求 URL。單擊刪除按鈕時，將調用handleDelete函數，該函數利用Axios刪除方法向服務器發送刪除請求，并指定相關id。請求成功后，響應數據將記錄在控制臺中。相反，如果發生任何錯誤，該錯誤也會記錄在控制臺中。

方式二：使用axios請求方式

替代方法需要使用 Axios 請求過程以及方法屬性的“刪除”屬性設置。以下是相應的代碼片段 –

// 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);
   }
}

登錄后復制

在此代碼中，我們定義了與第一種方法相同的deleteData 函數。但是，我們沒有使用 Axios 刪除方法，而是使用 Axios 請求方法，并將 method 屬性設置為“刪除”。如果請求成功，我們會將響應數據記錄到控制臺。如果發生錯誤，我們會將錯誤記錄到控制臺。

現在我們已經通過代碼和解釋介紹了這兩種方法，讓我們看兩個如何在 ReactJS 中向后端發送 Axios 刪除請求的工作示例。

示例：刪除確認模式

在此示例中，我們將創建一個刪除確認模式，在確認后刪除數據。這是代碼。

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;

登錄后復制

輸出

上面的代碼包含一個名為DeleteConfirmationModal的組件，它接受 id 屬性。單擊刪除按鈕時，將顯示確認模式。如果用戶確認刪除，則執行handleDelete函數。該函數利用axios刪除方法向服務器發送刪除請求，并指定id。請求成功后，響應數據將記錄到控制臺。相反，如果發生任何錯誤，該錯誤也會記錄在控制臺中。總之，isOpen 狀態設置為 false，從而關閉確認模式。