Javascript：获取 DELETE 和 PUT 请求

Question

我已经通过 Fetch 摆脱了 GET 和 POST 方法。但我找不到任何好的 DELETE 和 PUT 示例。

所以，我问你。您能否给出一个带有 fetch 的 DELETE 和 PUT 方法的好例子。并解释一下。

Answer 1

这是一个 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);

Answer 2

好的，这也是一个 fetch API 的示例

DELETE

：

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

Answer 3

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

Answer 4

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

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

Answer 5

这是使用 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。

Answer 6

一些例子：

async function loadItems() {
        try {
            let response = await fetch(`https://url/${AppID}`);
            let result = await response.json();
            return result;
        } catch (err) {
        }
    }

    async function addItem(item) {
        try {
            let response = await fetch("https://url", {
                method: "POST",
                body: JSON.stringify({
                    AppId: appId,
                    Key: item,
                    Value: item,
                    someBoolean: false,
                }),
                headers: {
                    "Content-Type": "application/json",
                },
            });
            let result = await response.json();
            return result;
        } catch (err) {
        }
    }

    async function removeItem(id) {
        try {
            let response = await fetch(`https://url/${id}`, {
                method: "DELETE",
            });
        } catch (err) {
        }
    }

    async function updateItem(item) {
        try {
            let response = await fetch(`https://url/${item.id}`, {
                method: "PUT",
                body: JSON.stringify(todo),
                headers: {
                    "Content-Type": "application/json",
                },
            });
        } catch (err) {
        }
    }

Answer 7

让我简化一下，你可以直接复制代码。

这是 PUT 方法：

fetch('https://reqres.in/api/users', + id {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'user'
  })
})
.then(res => {
  return res.json()
})
.then(data => console.log(data))

这是用于删除的：

fetch('https://reqres.in/api/users' + id, {
  method: 'DELETE',
})
.then(res => {
  return res.json()
}) 
.then(data => console.log(data))

注意：我在这里使用虚拟 api。

Answer 8

这就是使用 PUT 方法时对我有用的方法。这种方法允许我使用我的名字有效地更新第一项：

fetch('https://reqres.in/api/users', {
  method: 'PUT',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    id: 1,
    first_name: 'Anthony'
  })
})
.then(res => {
  return res.json()
})
.then(data => console.log(data))

Answer 9

以下是使用 Firebase 进行 React & redux 和 ReduxThunk 的删除和放置的示例：

更新（放置）：

export const updateProduct = (id, title, description, imageUrl) => {
    await fetch(`https://FirebaseProjectName.firebaseio.com/products/${id}.json`, {
  method: "PATCH",
  header: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title,
    description,
    imageUrl,
  }),
});

dispatch({
  type: "UPDATE_PRODUCT",
  pid: id,
  productData: {
    title,
    description,
    imageUrl,
  },
});
};
};

删除：

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

Answer 10

const DeleteBtn = (id) => {

    fetch(`http://localhost:8000/blogs/${id}`, {
        method: "DELETE"
    })
        .then(() => {
            navigate('/');
        });

}
<button onClick={(event) => { DeleteBtn(blog.id)} }>delete</button>