How to send HTTP-requests in Vue.js

By default, the browser has a built-in function called fetch () to send HTTP requests. It's built into the browser and hence we don't have to install any extra package to use it.

If you prefer third-party libraries like Axios (https://github.com/axios/axios) you can of course also use such libraries though.

For example, you could replace the fetch() code from the last lecture with this Axios code:

Instead of:

fetch('https://sergeyem.ru', {

  method: 'POST',

  headers: {

    'Content-Type': 'application/json',

  },

  body: JSON.stringify({

    name: this.name,

    rating: this.rating,

  }),

}).then(response => {

     /* eslint-disable no-console */

     console.log(response);

     /* eslint-enable no-console */

})

  .catch(error => {

     /* eslint-disable no-console */

     console.log(error);

     /* eslint-enable no-console */

});

you can write this code with Axios:

import axios from 'axios'; // at the start of your <script> tag, before you "export default ..."

...

axios.post('https://sergeyem.ru', {

  name: this.name,

  rating: this.rating,

}).then(response => {

     /* eslint-disable no-console */

     console.log(response);

     /* eslint-enable no-console */

})

  .catch(error => {

     /* eslint-disable no-console */

     console.log(error);

     /* eslint-enable no-console */

});

As you can see, with Axios, you have to write less code. It automatically sets the Content-Type header for you, it also automatically converts the body data to JSON.

BUT - as a downside - you have to add an extra package, which ultimately increases the size of the web app you're shipping in the end.

Later in the module, we'll also start reacting to the response returned by the request.

fetch() returns a Promise, hence we can use then(), catch() and async/ await there. For Axios, it's just the same - it also returns a Promise.