如何在JavaScript中將axios刪除發(fā)送到后端ReactJS

第如何在JavaScript中將axios刪除發(fā)送到后端ReactJS建立清除請(qǐng)求-隨后，您將使用Axios發(fā)起清除請(qǐng)求。這需要規(guī)定統(tǒng)一資源定位符（URL）、標(biāo)頭（如果有）以及需要傳輸?shù)椒?wù)器的任何數(shù)據(jù)。

發(fā)送請(qǐng)求-總之，您將使用Axios將清除請(qǐng)求發(fā)送到服務(wù)器。

方式一：使用axios刪除方法

第一種方法涉及使用Axios刪除方法。這是代碼-

importaxiosfromaxios

constdeleteData=async(id)={

try{

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

console.log(response.data);

}catch(error){

console.error(error);

在上面的代碼中，我們定義了一個(gè)名為deleteData的函數(shù)，它帶有一個(gè)id參數(shù)。在函數(shù)內(nèi)部，我們使用axios的delete方法向服務(wù)器發(fā)送刪除請(qǐng)求。我們定位的URL包含id參數(shù)，它代表我們要?jiǎng)h除的數(shù)據(jù)。如果請(qǐng)求成功，我們會(huì)將響應(yīng)數(shù)據(jù)記錄到控制臺(tái)。如果發(fā)生錯(cuò)誤，我們會(huì)將錯(cuò)誤記錄到控制臺(tái)。

在此示例中，我們將創(chuàng)建一個(gè)刪除按鈕，單擊該按鈕即可刪除數(shù)據(jù)。這是代碼-

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;

上述代碼說(shuō)明了一個(gè)名為DeleteButton的組件，該組件允許接受id屬性來(lái)建立刪除請(qǐng)求URL。單擊刪除按鈕時(shí)，將調(diào)用handleDelete函數(shù)，該函數(shù)利用Axios刪除方法向服務(wù)器發(fā)送刪除請(qǐng)求，并指定相關(guān)id。請(qǐng)求成功后，響應(yīng)數(shù)據(jù)將記錄在控制臺(tái)中。相反，如果發(fā)生任何錯(cuò)誤，該錯(cuò)誤也會(huì)記錄在控制臺(tái)中。

方式二：使用axios請(qǐng)求方式

替代方法需要使用Axios請(qǐng)求過(guò)程以及方法屬性的刪除屬性設(shè)置。以下是相應(yīng)的代碼片段-

//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函數(shù)。但是，我們沒(méi)有使用Axios刪除方法，而是使用Axios請(qǐng)求方法，并將method屬性設(shè)置為刪除。如果請(qǐng)求成功，我們會(huì)將響應(yīng)數(shù)據(jù)記錄到控制臺(tái)。如果發(fā)生錯(cuò)誤，我們會(huì)將錯(cuò)誤記錄到控制臺(tái)。

現(xiàn)在我們已經(jīng)通過(guò)代碼和解釋介紹了這兩種方法，讓我們看兩個(gè)如何在ReactJS中向后端發(fā)送Axios刪除請(qǐng)求的工作示例。

示例：刪除確認(rèn)模式

在此示例中，我們將創(chuàng)建一個(gè)刪除確認(rèn)模式，在確認(rèn)后刪除數(shù)據(jù)。這是代碼。

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;

上面的代碼包含一個(gè)名為DeleteConfirmationModal的組件，它接受id屬性。單擊刪除按鈕時(shí)，將顯示確認(rèn)模式。如果用戶確認(rèn)刪除，則執(zhí)行handleDelete函數(shù)。該函數(shù)利用axios刪除方法向服務(wù)器發(fā)送刪除請(qǐng)求，并指定id。請(qǐng)求成功后，響應(yīng)數(shù)據(jù)將記錄到控制臺(tái)。相反，如果發(fā)生任何錯(cuò)誤，該錯(cuò)誤也會(huì)記錄在控制臺(tái)中?？傊琲sOpen狀態(tài)設(shè)置為false，從而關(guān)閉確