How to send HTTP-requests in Vue.js

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.

Popular Posts

My most popular posts

Maximum productivity on remote job
Business

Maximum productivity on remote job

I started my own business and intentionally did my best to work from anywhere in the world. Sometimes I sit with my office with a large 27-inch monitor in my apartment in Cheboksary. Sometimes I’m in the office or in some cafe in another city.

Hello! I am Sergey Emelyanov and I am hardworker
Business PHP

Hello! I am Sergey Emelyanov and I am hardworker

I am a programmer. I am an entrepreneur in my heart. I started making money from the age of 11, in the harsh 90s, handing over glassware to a local store and exchanging it for sweets. I earned so much that was enough for various snacks.

Hire Professional CRM developer for $25 per hour

I will make time for your project. Knowledge of Vtiger CRM, SuiteCRM, Laravel, and Vue.js. I offer cooperation options that will help you take advantage of external experience, optimize costs and reduce risks. Full transparency of all stages of work and accounting for time costs. Pay only development working hours after accepting the task. Accept PayPal and Payoneer payment systems. How to hire professional developer? Just fill in the form

Telegram
@sergeyem
Telephone
+4915211100235