Javascript: Fetch DELETE and PUT requests

I have gotten outside of GET and POST methods with Fetch. But I couldn't find any good DELETE and PUT example.

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

9 Answers

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(' { method: 'POST', body: formData }).then(response => response.json())
}
createNewProfile(profile) .then((json) => { // handle success }) .catch(error => error);

4

Ok, here is a fetch DELETE example too:

fetch(' + id, { method: 'DELETE',
})
.then(res => res.text()) // or res.json()
.then(res => console.log(res))

2

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

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

In the url we need to type the id of the of deletion:

Just Simple Answer. FETCH DELETE

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

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

“A practical ES6 guide on how to perform HTTP requests using the Fetch API” by Dler Ari

Here is the sample 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 DELETE:

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

For more info visit Using Fetch - Web APIs | MDN > Fetch_API.

1

Some examples:

async function loadItems() { try { let response = await fetch(`); let result = await response.json(); return result; } catch (err) { } } async function addItem(item) { try { let response = await fetch("", { 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(` { method: "DELETE", }); } catch (err) { } } async function updateItem(item) { try { let response = await fetch(` { method: "PUT", body: JSON.stringify(todo), headers: { "Content-Type": "application/json", }, }); } catch (err) { } }

1

Let me simplify this, you can straight up copy the code.

This is for PUT method :

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

and this is for DELETE :

fetch(' + id, { method: 'DELETE',
})
.then(res => { return res.json()
})
.then(data => console.log(data))

Note: I'm using dummy api here.

1

Here are examples for Delete and Put for React & redux & ReduxThunk with Firebase:

Update (PUT):

export const updateProduct = (id, title, description, imageUrl) => { await fetch(` { method: "PATCH", header: { "Content-Type": "application/json", }, body: JSON.stringify({ title, description, imageUrl, }),
});
dispatch({ type: "UPDATE_PRODUCT", pid: id, productData: { title, description, imageUrl, },
});
};
};

Delete:

export const deleteProduct = (ProductId) => { return async (dispatch) => {
await fetch( ` { method: "DELETE", }
);
dispatch({ type: "DELETE_PRODUCT", pid: ProductId,
}); };
};

This is what worked for me when using the PUT method. This method allows me to effectively update the 1st item using my first name:

fetch(' { 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))

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy