2023如何在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，从而关闭确认模式。

结论

在本文中，我们探讨了如何使用 JavaScript 向 ReactJS 中的后端发送 Axios 删除请求。我们通过代码和解释介绍了两种不同的方法，以及两个工作示例。通过遵循本文中概述的步骤，您应该能够使用 ReactJS 和 Axios 轻松地从后端删除数据。