什么是發(fā)送 Axios 刪除？
使用 ReactJS 和 Axios 從后端刪除數(shù)據(jù)可能是一項(xiàng)具有挑戰(zhàn)性的任務(wù)。然而，憑借正確的方法和知識(shí)，您可以輕松完成此任務(wù)。在本文中，我們將探討如何使用 JavaScript 向 ReactJS 中的后端發(fā)送 Axios 刪除請求。我們將通過代碼和解釋來介紹兩種不同的方法，以及兩個(gè)工作示例。那么，讓我們開始吧！
算法
在開始我們的討論之前，了解使用 ReactJS 時(shí)向后端發(fā)送 Axios 刪除請求的過程至關(guān)重要。以下是步驟 –
合并 Axios – 必須包含 Axios，這是一個(gè)用于偽造 HTTP 請?jiān)笗牧餍袔臁?/p>
建立清除請求 – 隨后，您將使用 Axios 發(fā)起清除請求。這需要規(guī)定統(tǒng)一資源定位符（URL）、標(biāo)頭（如果有）以及需要傳輸?shù)椒?wù)器的任何數(shù)據(jù)。
發(fā)送請求 – 總之，您將使用 Axios 將清除請求發(fā)送到服務(wù)器。
方式一：使用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);
}
};
登錄后復(fù)制
在上面的代碼中，我們定義了一個(gè)名為deleteData的函數(shù)，它帶有一個(gè)id參數(shù)。在函數(shù)內(nèi)部，我們使用axios的delete方法向服務(wù)器發(fā)送刪除請求。我們定位的 URL 包含 id 參數(shù)，它代表我們要?jiǎng)h除的數(shù)據(jù)。如果請求成功，我們會(huì)將響應(yīng)數(shù)據(jù)記錄到控制臺(tái)。如果發(fā)生錯(cuò)誤，我們會(huì)將錯(cuò)誤記錄到控制臺(tái)。
示例
在此示例中，我們將創(chuàng)建一個(gè)刪除按鈕，單擊該按鈕即可刪除數(shù)據(jù)。這是代碼 –
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;
登錄后復(fù)制
上述代碼說明了一個(gè)名為“DeleteButton”的組件，該組件允許接受 id 屬性來建立刪除請求 URL。單擊刪除按鈕時(shí)，將調(diào)用handleDelete函數(shù)，該函數(shù)利用Axios刪除方法向服務(wù)器發(fā)送刪除請求，并指定相關(guān)id。請求成功后，響應(yīng)數(shù)據(jù)將記錄在控制臺(tái)中。相反，如果發(fā)生任何錯(cuò)誤，該錯(cuò)誤也會(huì)記錄在控制臺(tái)中。
方式二：使用axios請求方式
替代方法需要使用 Axios 請求過程以及方法屬性的“刪除”屬性設(shè)置。以下是相應(yīng)的代碼片段 –
// 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);
}
}
登錄后復(fù)制
在此代碼中，我們定義了與第一種方法相同的deleteData 函數(shù)。但是，我們沒有使用 Axios 刪除方法，而是使用 Axios 請求方法，并將 method 屬性設(shè)置為“刪除”。如果請求成功，我們會(huì)將響應(yīng)數(shù)據(jù)記錄到控制臺(tái)。如果發(fā)生錯(cuò)誤，我們會(huì)將錯(cuò)誤記錄到控制臺(tái)。
現(xiàn)在我們已經(jīng)通過代碼和解釋介紹了這兩種方法，讓我們看兩個(gè)如何在 ReactJS 中向后端發(fā)送 Axios 刪除請求的工作示例。
示例：刪除確認(rèn)模式
在此示例中，我們將創(chuàng)建一個(gè)刪除確認(rèn)模式，在確認(rèn)后刪除數(shù)據(jù)。這是代碼。
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;
登錄后復(fù)制
輸出
上面的代碼包含一個(gè)名為DeleteConfirmationModal的組件，它接受 id 屬性。單擊刪除按鈕時(shí)，將顯示確認(rèn)模式。如果用戶確認(rèn)刪除，則執(zhí)行handleDelete函數(shù)。該函數(shù)利用axios刪除方法向服務(wù)器發(fā)送刪除請求，并指定id。請求成功后，響應(yīng)數(shù)據(jù)將記錄到控制臺(tái)。相反，如果發(fā)生任何錯(cuò)誤，該錯(cuò)誤也會(huì)記錄在控制臺(tái)中。總之，isOpen 狀態(tài)設(shè)置為 false，從而關(guān)閉確認(rèn)模式。
結(jié)論
在本文中，我們探討了如何使用 JavaScript 向 ReactJS 中的后端發(fā)送 Axios 刪除請求。我們通過代碼和解釋介紹了兩種不同的方法，以及兩個(gè)工作示例。通過遵循本文中概述的步驟，您應(yīng)該能夠使用 ReactJS 和 Axios 輕松地從后端刪除數(shù)據(jù)。
以上就是如何在JavaScript中將axios刪除發(fā)送到后端ReactJS的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
