我已经脱离了使用 Fetch 的 GET 和 POST 方法。但是我找不到任何好的 DELETE 和 PUT 示例。
所以，我问你。你能举一个带有 fetch 的 DELETE 和 PUT 方法的好例子吗？并稍微解释一下。
Javascript：获取 DELETE 和 PUT 请求
IT技术
javascript
reactjs
fetch
http-delete
http-put
2021-04-02 08:17:05
6个回答
这是一个获取POST示例。您可以对DELETE.
function createNewProfile(profile) {
const formData = new FormData();
formData.append('first_name', profile.firstName);
formData.append('last_name', profile.lastName);
formData.append('email', profile.email);
return fetch('http://example.com/api/v1/registration', {
method: 'POST',
body: formData
}).then(response => response.json())
}
createNewProfile(profile)
.then((json) => {
// handle success
})
.catch(error => error);
好的，这里也是一个获取DELETE示例：
fetch('https://example.com/delete-item/' + id, {
method: 'DELETE',
})
.then(res => res.text()) // or res.json()
.then(res => console.log(res))
对于 put 方法，我们有：
const putMethod = {
method: 'PUT', // Method itself
headers: {
'Content-type': 'application/json; charset=UTF-8' // Indicates the content
},
body: JSON.stringify(someData) // We send data in JSON format
}
// make the HTTP put request using fetch api
fetch(url, putMethod)
.then(response => response.json())
.then(data => console.log(data)) // Manipulate the data retrieved back, if we want to do something with it
.catch(err => console.log(err)) // Do something with the error
someData 的示例，我们可以有一些输入字段或您需要的任何内容：
const someData = {
title: document.querySelector(TitleInput).value,
body: document.querySelector(BodyInput).value
}
在我们data base将有这样的json格式：
{
"posts": [
"id": 1,
"title": "Some Title", // what we typed in the title input field
"body": "Some Body", // what we typed in the body input field
]
}
对于删除方法，我们有：
const deleteMethod = {
method: 'DELETE', // Method itself
headers: {
'Content-type': 'application/json; charset=UTF-8' // Indicates the content
},
// No need to have body, because we don't send nothing to the server.
}
// Make the HTTP Delete call using fetch api
fetch(url, deleteMethod)
.then(response => response.json())
.then(data => console.log(data)) // Manipulate the data retrieved back, if we want to do something with it
.catch(err => console.log(err)) // Do something with the error
在 url 中，我们需要输入删除的 id： https://www.someapi/id
只是简单的答案。获取删除
function deleteData(item, url) {
return fetch(url + '/' + item, {
method: 'delete'
})
.then(response => response.json());
}
下面是使用 fetch API 的 CRUD 操作的好例子：
“关于如何使用 Fetch API 执行 HTTP 请求的实用 ES6 指南”，作者 Dler Ari https://link.medium.com/4ZvwCordCW
这是我为 PATCH 或 PUT 尝试的示例代码
function update(id, data){
fetch(apiUrl + "/" + id, {
method: 'PATCH',
body: JSON.stringify({
data
})
}).then((response) => {
response.json().then((response) => {
console.log(response);
})
}).catch(err => {
console.error(err)
})
对于删除：
function remove(id){
fetch(apiUrl + "/" + id, {
method: 'DELETE'
}).then(() => {
console.log('removed');
}).catch(err => {
console.error(err)
});
有关更多信息，请访问使用 Fetch - Web API | MDN https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch > Fetch_API。