Javascript Fetch DELETE and PUT requests

Question

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

User · Answer

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 https://link.medium.com/4ZvwCordCW

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 https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch > Fetch_API.

User · Answer

Ok  here is a fetch DELETE example too   fetch  https   example com delete-item     id      method   DELETE       then res   gt  res text       or res json    then res   gt  console log res

User · Answer

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   gt  response json       createNewProfile profile      then  json    gt              handle success            catch error   gt  error

User · Answer

Here are examples for Delete and Put for React  amp  redux  amp  ReduxThunk with Firebase  Update  PUT   export const updateProduct    id  title  description  imageUrl    gt        await fetch  https   FirebaseProjectName firebaseio com products   id  json       method   quot PATCH quot     header         quot Content-Type quot    quot application json quot          body  JSON stringify       title      description      imageUrl             dispatch     type   quot UPDATE PRODUCT quot     pid  id    productData        title      description      imageUrl                  Delete  export const deleteProduct    ProductId    gt      return async  dispatch    gt    await fetch     https   FirebaseProjectName firebaseio com products   ProductId  json           method   quot DELETE quot          dispatch     type   quot DELETE PRODUCT quot     pid  ProductId

User · Answer

Just Simple Answer   FETCH DELETE  function deleteData item  url      return fetch url         item        method   delete          then response   gt  response json

User · Answer

Some examples  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  quot https   url quot                 method   quot POST quot               body  JSON stringify                   AppId  appId                  Key  item                  Value  item                  someBoolean  false                              headers                     quot Content-Type quot    quot application json quot                                      let result   await response json            return result        catch  err             async function removeItem id        try           let response   await fetch  https   url   id                  method   quot DELETE quot                     catch  err             async function updateItem item        try           let response   await fetch  https   url   item id                  method   quot PUT quot               body  JSON stringify todo               headers                     quot Content-Type quot    quot application json quot                                    catch  err

User · Answer

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   gt  response json     then data   gt  console log data      Manipulate the data retrieved back  if we want to do something with it  catch err   gt  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      quot posts quot         quot id quot   1      quot title quot    quot Some Title quot      what we typed in the title input field     quot body quot    quot Some Body quot      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   gt  response json     then data   gt  console log data      Manipulate the data retrieved back  if we want to do something with it  catch err   gt  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

[javascript] Javascript: Fetch DELETE and PUT requests

Examples related to javascript

Examples related to reactjs

Examples related to fetch

Examples related to http-delete

Examples related to http-put