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