如何在JavaScript中将axios删除发送到后端ReactJS

第如何在JavaScript中将axios删除发送到后端ReactJS建立清除请求-随后，您将使用Axios发起清除请求。这需要规定统一资源定位符（URL）、标头（如果有）以及需要传输到服务器的任何数据。

发送请求-总之，您将使用Axios将清除请求发送到服务器。

方式一：使用axios删除方法

第一种方法涉及使用Axios删除方法。这是代码-

importaxiosfromaxios

constdeleteData=async(id)={

try{

constresponse=awAItaxios.delete(`/api/data/${id}`);

console.log(response.data);

}catch(error){

console.error(error);

在上面的代码中，我们定义了一个名为deleteData的函数，它带有一个id参数。在函数内部，我们使用axios的delete方法向服务器发送删除请求。我们定位的URL包含id参数，它代表我们要删除的数据。如果请求成功，我们会将响应数据记录到控制台。如果发生错误，我们会将错误记录到控制台。

在此示例中，我们将创建一个删除按钮，单击该按钮即可删除数据。这是代码-

importReactfromreact

importaxiosfromaxios

constDeleteButton=({id})={

consthandleDelete=async()={

try{

constresponse=awaitaxios.delete(`/api/data/${id}`);

console.log(response.data);

}catch(error){

console.error(error);

return(

buttonhandleDelete}

Delete

/button

exportdefaultDeleteButton;

上述代码说明了一个名为DeleteButton的组件，该组件允许接受id属性来建立删除请求URL。单击删除按钮时，将调用handleDelete函数，该函数利用Axios删除方法向服务器发送删除请求，并指定相关id。请求成功后，响应数据将记录在控制台中。相反，如果发生任何错误，该错误也会记录在控制台中。

方式二：使用axios请求方式

替代方法需要使用Axios请求过程以及方法属性的删除属性设置。以下是相应的代码片段-

//ImportAxioslibrary

constaxios=require(axios

//Defineafunctiontodeletedata

asyncfunctiondeleteData(id){

try{

//MakeaDELETErequesttotheAPIwiththegivenID

constresponse=awaitaxios({

url:/api/data/+id,

method:delete

console.log(response.data);

}catch(error){

//Loganyerrorsthatoccur

console.error(error);

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

现在我们已经通过代码和解释介绍了这两种方法，让我们看两个如何在ReactJS中向后端发送Axios删除请求的工作示例。

示例：删除确认模式

在此示例中，我们将创建一个删除确认模式，在确认后删除数据。这是代码。

importReact,{useState}fromreact

importaxiosfromaxios

constDeleteConfirmationModal=({id})={

const[isOpen,setIsOpen]=useState(false);

consthandleDelete=async()={

try{

constresponse=awaitaxios.delete(`/api/data/${id}`);

console.log(response.data);

}catch(error){

console.error(error);

setIsOpen(false);

return(

button()=setIsOpen(true)}

Delete

/button

{isOpen(

div

pAreyousureyouwanttodeletethisdata/p

buttonhandleDelete}

Yes,deleteit

/button

button()=setIsOpen(false)}

Cancel

/button

/div

exportdefaultDeleteConfirmationModal;

上面的代码包含一个名为DeleteConfirmationModal的组件，它接受id属性。单击删除按钮时，将显示确认模式。如果用户确认删除，则执行handleDelete函数。该函数利用axios删除方法向服务器发送删除请求，并指定id。请求成功后，响应数据将记录到控制台。相反，如果发生任何错误，该错误也会记录在控制台中。总之，isOpen状态设置为false，从而关闭确