Отправляем HTTP-запросы из Vue.js

По умолчанию в браузер встроена функция под названием fetch() для отправки HTTP-запросов. Она есть во всех браузерах и вам не нужно устанавливать дополнительные пакеты.

Если вы предпочитаете использовать сторонние библиотеки, такие как Axios (https://github.com/axios/axios), то вы можете использовать и их.

Например, вы можете заменить код с функцией fetch() на аналогичный с использованием подобной библиотеки.

Вместо этого кода:

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 */

});

Вы можете переписать этот код на 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 */

});

Как можно увидеть, здесь вам нужно писать гораздо меньше кода. Библиотека автоматически назначит вам COntent-Type в заголовки и сама сконвертирует данные в формат JSON.

Но, как и говорилось ранее, вам потребуется устанавливать в проект дополнительный пакет, что может существенно увеличить общий размер вашего приложения.

fetch() возвращает Promise, т.е. затем вы можете использовать then(), catch() и async/await. В случае с Axios, всё то же самое - она тоже возвращает Promise.