如何在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+ 次浏览

启动您的职业生涯

通过完成课程获得认证

开始学习
广告