Javascript:获取、删除和放置请求

Javascript:获取、删除和放置请求,javascript,reactjs,fetch,http-delete,http-put,Javascript,Reactjs,Fetch,Http Delete,Http Put,我已经用Fetch获得了GET和POST方法之外的内容。但我找不到任何好的删除和放置示例 所以,我向你要。你能举一个关于DELETE和PUT方法与fetch的好例子吗。再解释一下 下面是一个fetchPOST示例。您可以对删除执行相同的操作 function createNewProfile(profile) { const formData = new FormData(); formData.append('first_name', profile.firstName);

我已经用Fetch获得了GET和POST方法之外的内容。但我找不到任何好的删除和放置示例


所以,我向你要。你能举一个关于DELETE和PUT方法与fetch的好例子吗。再解释一下

下面是一个fetch
POST
示例。您可以对
删除
执行相同的操作

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);

好的,这里还有一个fetch
DELETE
示例:

fetch('https://example.com/delete-item/' + id, {
  method: 'DELETE',
})
.then(res => res.text()) // or res.json()
.then(res => console.log(res))
答案很简单。 获取删除

函数删除数据(项、url){
返回获取(url+'/'+项{
方法:“删除”
})
.then(response=>response.json());
}

下面是一个使用fetch API的CRUD操作的好例子:

《关于如何使用fetchAPI执行HTTP请求的实用ES6指南》,作者:Dler Ari

下面是我为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-webapi | MDN>Fetch|u API

对于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
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
例如,对于某些数据,我们可以有一些输入字段或您需要的任何内容:

const someData = {
 title: document.querySelector(TitleInput).value,
 body: document.querySelector(BodyInput).value
}
在我们的
数据库中
将采用
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 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
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

以下是React&redux&ReduxThunk与Firebase的删除和放置示例:

更新(PUT):

删除:

export const deleteProduct = (ProductId) => {
  return async (dispatch) => {
await fetch(
  `https://FirebaseProjectName.firebaseio.com/products/${ProductId}.json`,
  {
    method: "DELETE",
  }
);
dispatch({
  type: "DELETE_PRODUCT",
  pid: ProductId,
});
  };
};
一些例子:

异步函数loadItems(){ 试一试{ let response=等待获取(
https://url/${AppID}
); 让result=wait response.json(); 返回结果; }捕捉(错误){ } }


那么POST、PUT和DELETE在语法上是相同的吗?区别在于您需要记录的
id
来删除或PUT。它现在看起来像
returnfetch('http://example.com/api/v1/registration/1“,{/code>
方法:'PUT',
正文:formData
})
如果API不需要记录的Id,为什么我们需要记录的Id?需要Id是特定于API的。始终正确的一点是,使用
PUT
DELETE
分别更新或删除URI中的资源。因此,如果对
/x
执行
删除
请求,我希望
/x
之后会被删除;你不应该在每件事上都加上“谢谢”,当然也不应该加表情符号(除非问答实际上是关于处理它们的,例如Unicode处理)。注意,不需要解析结果。将res解析为文本将返回空字符串,将其解析为JSON将导致解析错误。必须解析promise,因为第一个
res
是promise.mmm。。。真正地这没有道理。。。为什么要在url中发送ID,而在正文中发送其余数据?我从来没有见过这样的击球。。。