Javascript: Fetch DELETE and PUT requests Javascript: Fetch DELETE and PUT requests reactjs reactjs

Javascript: Fetch DELETE and PUT requests


Here is a fetch POST example. 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);


Ok, here is a fetch DELETE example too:

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


For 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}// make the HTTP put request using fetch apifetch(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

Example for someData, we can have some input fields or whatever you need:

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

And in our data base will have this 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 delete 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.}// Make the HTTP Delete call using fetch apifetch(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 type the id of the of deletion: https://www.someapi/id