如何在JavaScript中使用Axios向ReactJS後端傳送DELETE請求

什麼是傳送Axios DELETE請求？

使用ReactJS和Axios從後端刪除資料可能是一項具有挑戰性的任務。但是，採用正確的方法和知識，您可以輕鬆完成此任務。在本文中，我們將探討如何使用JavaScript在ReactJS中向後端傳送Axios DELETE請求。我們將介紹兩種不同的方法，包括程式碼和解釋，以及兩個可執行的示例。那麼，讓我們開始吧！

演算法

首先，瞭解在使用ReactJS時向後端傳送Axios刪除請求的過程至關重要。步驟如下：

  • 引入Axios - 必須引入Axios，這是一個常用的用於建立HTTP請求的庫。

  • 建立刪除請求 - 接下來，您將使用Axios啟動一個刪除請求。這包括指定統一資源定位符（URL）、標頭（如有）以及需要傳送到伺服器的任何資料。

  • 傳送請求 - 最後，您將使用Axios將刪除請求傳送到伺服器。

方法一：使用Axios DELETE方法

第一種方法涉及使用Axios DELETE方法。程式碼如下：

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方法向伺服器傳送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 prop來設定DELETE請求的URL。單擊刪除按鈕時，將呼叫handleDelete函式，該函式使用Axios DELETE方法向伺服器傳送DELETE請求，並指定相應的id。請求成功後，響應資料將記錄到控制檯。相反，如果發生任何錯誤，錯誤也將記錄到控制檯。

方法二：使用Axios request方法

另一種方法需要使用Axios request方法，並將'delete'屬性設定為method屬性。以下是相應的程式碼片段：

// 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 DELETE方法，而是使用了Axios request方法，並將method屬性設定為'delete'。如果請求成功，我們將響應資料記錄到控制檯。如果發生錯誤，我們將錯誤記錄到控制檯。

現在，我們已經介紹了兩種方法的程式碼和解釋，讓我們來看兩個在ReactJS中向後端傳送Axios DELETE請求的可執行示例。

示例：刪除確認模態框

在此示例中，我們將建立一個刪除確認模態框，在確認後刪除資料。程式碼如下。

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 prop。單擊刪除按鈕時，將顯示一個確認模態框。如果使用者確認刪除，則執行handleDelete函式。此函式使用Axios DELETE方法向伺服器傳送DELETE請求，並指定id。請求成功後，響應資料將記錄到控制檯。相反，如果發生任何錯誤，錯誤也將記錄到控制檯。最後，isOpen狀態設定為false，從而關閉確認模態框。

結論

在本文中，我們探討了如何使用JavaScript在ReactJS中向後端傳送Axios DELETE請求。我們介紹了兩種不同的方法，包括程式碼和解釋，以及兩個可執行的示例。按照本文中概述的步驟，您應該能夠輕鬆地使用ReactJS和Axios從後端刪除資料。

更新於：2023年4月17日

4K+ 次瀏覽

啟動您的職業生涯

透過完成課程獲得認證

開始學習
廣告