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

iyr7buue  于 2022-09-18  发布在  Java
关注(0)|答案(5)|浏览(141)

我已经通过FETCH获得了GET和POST方法之外的内容。但我找不到任何好的删除和添加示例。

所以,我请求你这么做。您能给出一个使用FETCH的Delete和Put方法的好例子吗?稍微解释一下。

u91tlkcl

u91tlkcl1#

下面是一个FETCH 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);
jvidinwx

jvidinwx2#

好的,下面也是一个FETCH DELETE示例:

fetch('https://example.com/delete-item/' + id, {
  method: 'DELETE',
})
.then(res => res.text()) // or res.json()
.then(res => console.log(res))
brccelvz

brccelvz3#

对于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 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

cfh9epnr

cfh9epnr4#

只是简单的回答。获取删除

function deleteData(item, url) {
  return fetch(url + '/' + item, {
    method: 'delete'
  })
  .then(response => response.json());
}
uqdfh47h

uqdfh47h5#

下面是使用FETCH API的CRUD操作的很好的示例:

《关于如何使用Fetch API执行HTTP请求的ES6实用指南》,作者:Dler Ari https://link.medium.com/4ZvwCordCW

以下是我尝试修补或放置的示例代码

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

有关更多信息,请访问Using Fetch-Web API|MDN https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch>Fetch_API。

相关问题