vue.jsHow do I make an XHR request with Vue.js?

To make an XHR request with Vue.js, you can use the axios library. axios is an easy to use library that provides a simple API for making HTTP requests from the browser and Node.js.

Here is an example of an XHR request with axios:

axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });

If the request is successful, the response object will contain the response data. If the request fails, the error object will contain information about the error that occurred.

You can also pass in additional options to customize the request. For example, you can set the headers option to pass in custom headers:

axios.get('/user?ID=12345', {
  headers: {
    'X-Custom-Header': 'foobar'
  }
})
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .finally(function () {
    // always executed
  });

You can learn more about axios and XHR requests in the Vue.js documentation.

Edit this code on GitHub