Javascript: fetching DELETE and PUT requests

Question

I got outside of the GET and POST methods with Fetch. But I could not find a good example of DELETE and PUT.

So, I ask you about this. Could you give a good example of the DELETE and PUT methods with fetch. And explain it a bit.

Answer 1

Here is an example of getting a POST . You can do the same for 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

Ok, here is another DELETE example:

 fetch('https://example.com/delete-item/', { method: 'DELETE', headers: {'content-type': 'application/json'}, body: JSON.stringify({id: '5bdcdfa40f0a326f858feae0'}) }) .then(res => res.text()) // OR res.json() .then(res => console.log(res)) 

Answer 3

Just a simple answer. REMOVE REMOVE

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

Answer 4

Here is a good example of a CRUD operation using the fetch API:

"ES6 How-To Guide for Making HTTP Requests Using the Fetch API," by Dler Ari https://link.medium.com/4ZvwCordCW

Here is an example of the code I tried for PATCH or 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) }) 

For removing:

 function remove(id){ fetch(apiUrl + "/" + id, { method: 'DELETE' }).then(() => { console.log('removed'); }).catch(err => { console.error(err) }); 

For more information, visit the Using Fetch Web Interface | MDN https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch > Fetch_API.

Answer 5

For the put method, we have:

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

For example, for someData we can have several input fields or all you need:

 const someData = { title: document.querySelector(TitleInput).value, body: document.querySelector(BodyInput).value } 

And in our data base will be in json format:

 { "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 ] } 

For the removal method, we have:

 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. } 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 

In the URL we need to enter the delete identifier: https://www.someapi/id