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 are examples for Delete and Put for React & redux & ReduxThunk with Firebase:

Update (PUT):

export const updateProduct = (id, title, description, imageUrl) => {
    await fetch(`https://FirebaseProjectName.firebaseio.com/products/${id}.json`, {
  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(
  `https://FirebaseProjectName.firebaseio.com/products/${ProductId}.json`,
  {
    method: "DELETE",
  }
);
dispatch({
  type: "DELETE_PRODUCT",
  pid: ProductId,
});
  };
};

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

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

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

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

User · Answer

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

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    gt        response json   then  response    gt          console log response               catch err   gt        console error err         For DELETE    function remove id     fetch apiUrl         id        method   DELETE       then      gt         console log  removed         catch err   gt        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

[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