How to make a DELETE request in Vue.js

in Code Write a comment

In this tutorial, you’ll learn how to make a DELETE() request in Vue.js using axios.

You can learn, how to make POST(), GET() requests in my previous tutorials.

Making a DELETE request in Vue.js

axios.delete(process.env.VUE_APP_BASE_URL + 'api/users/1/', config)
  .then(function (response) {
    console.log(response)
  })
  .catch(function (error) {
    console.log(error)
  })

The API call above will send a DELETE request to the following API route process.env.VUE_APP_BASE_URL + 'api/users/1/'.

You should configure your back-end server to accept DELETE requests.


Hi, I'm Renat 👋

 


A real-life example of DELETE request in Vuex

DELETE_USER ({ commit, state }, { userId }) {
  return new Promise((resolve, reject) => {
    axios.delete(process.env.VUE_APP_BASE_URL + 'api/users/' + userId + '/', config).then(response => {
      resolve(response)
    }).catch(error => {
      reject(error)
    })
  })
}

In the example above, we’re using JavaScript Promises for the eventual completion of the request.

If you find this post useful, please let me know in the comments below. 
Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/vue-js-delete-request

PS: Make sure you check other Vue.js tutorials, e.g. how to call a function/method on page load in Vue.js.

A collection of UI components for
Bootstrap 4/5 and Vue.js

Get now

Write a Comment

Comment