如何在JavaScript中將axios刪除傳送到後端ReactJS-js教程-PHP中文網

什麼是發送 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 (  ); }; 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 ( <>  {isOpen && (  Are you sure you want to delete this data?
   
 )}  ); }; export default DeleteConfirmationModal;

登入後複製

輸出

如何在JavaScript中將axios刪除傳送到後端ReactJS

上面的程式碼包含一個名為DeleteConfirmationModal的元件，它接受 id 屬性。單擊刪除按鈕時，將顯示確認模式。如果使用者確認刪除，則執行handleDelete函數。此函數利用axios刪除方法向伺服器發送刪除請求，並指定id。請求成功後，回應資料將記錄到控制台。相反，如果發生任何錯誤，該錯誤也會記錄在控制台中。總之，isOpen 狀態設定為 false，從而關閉確認模式。