使用 ReactJS 和 Axios 从后端删除数据可能是一项具有挑战性的任务。然而，凭借正确的方法和知识，您可以轻松完成此任务。在本文中，我们将探讨如何使用 JavaScript 向 ReactJS 中的后端发送 Axios 删除请求。我们将通过代码和解释来介绍两种不同的方法，以及两个工作示例。那么，让我们开始吧！
在开始我们的讨论之前，了解使用 ReactJS 时向后端发送 Axios 删除请求的过程至关重要。以下是步骤 -
合并 Axios - 必须包含 Axios，这是一个用于伪造 HTTP 请愿书的流行库。
建立清除请求 - 随后，您将使用 Axios 发起清除请求。这需要规定统一资源定位符（URL）、标头（如果有）以及需要传输到服务器的任何数据。
发送请求 - 总之，您将使用 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 请求过程以及方法属性的“删除”属性设置。以下是相应的代码片段 -
// 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 轻松地从后端删除数据。
以上是如何在JavaScript中将axios删除发送到后端ReactJS的详细内容。更多信息请关注PHP中文网其他相关文章！
