如何在 JavaScript 中将 Axios Delete 发送到后端 ReactJS

javascriptreactjsweb developmentfront end technology

什么是发送 Axios Delete?

使用 ReactJS 和 Axios 从后端删除数据可能是一项艰巨的任务。但是，只要采用正确的方法和知识，您就可以轻松完成此任务。在本文中，我们将探讨如何使用 JavaScript 在 ReactJS 中向后端发送 Axios 删除请求。我们将介绍两种不同的方法，并提供代码和说明以及两个工作示例。那么，让我们开始吧!

算法

在开始我们的讨论之前，最重要的是要了解在使用 ReactJS 时将 Axios 删除请求传输到后端的过程。以下是步骤 -

集成 Axios - 必须包含 Axios，这是一个用于编写 HTTP 请求的流行库。
创建清除请求 - 随后，您将使用 Axios 启动清除请求。这需要指定统一资源定位器 (URL)、标头(如果有)以及需要传输到服务器的任何数据。
发送请求 - 最后，您将使用 Axios 将清除请求传输到服务器。

方法 1:使用 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 prop 来建立删除请求 URL。单击删除按钮时，将调用 handleDelete 函数，该函数利用 Axios 删除方法向服务器发送删除请求，并指定相关 id。请求成功后，响应数据将记录在控制台中。相反，如果出现任何错误，错误也会记录在控制台中。

方法 2:使用 Axios 请求方法

替代方法需要使用 Axios 请求过程，并为方法属性设置"delete"属性。以下是相应的代码片段 −

// 导入 Axios 库
const axios = require('axios');

// 定义一个函数来删除数据
async function deleteData(id) {
   try {
   
      // 使用给定的 ID 向 API 发出 DELETE 请求
      const response = await axios({
         url: 'https://example.com/api/data/' + id,
         method: 'delete'
      });
      console.log(response.data);
   } catch (error) {
   
      // 记录发生的任何错误
      console.error(error);
   }
}

在此代码中，我们定义了与第一种方法相同的 deleteData 函数。但是，我们不是使用 Axios 删除方法，而是使用 Axios 请求方法，并将方法属性设置为"delete"。然后，如果请求成功，我们将响应数据记录到控制台。如果发生错误，我们将错误记录到控制台。

现在我们已经用代码和说明介绍了这两种方法，让我们看两个如何在 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 delete 方法将删除请求传输到服务器，并指定 id。请求成功后，响应数据将记录到控制台。相反，如果发生任何错误，错误也会记录在控制台中。最后，将 isOpen 状态设置为 false，从而关闭确认模式。