Довольно много фреймворков имеют встроенный апи для отправки HTTP запросов. Angular 2 имеет http модуль,JQuery имеет $.ajax, и до версии Vue 2.0, Vue.js имел vue-resource. В Vue 2.0 разработчики фреймворка решили что наличие встроенного http клиента является избыточным и будет лучше использовать сторонние библиотеки. Одной из самых популярных библиотек является Axios.
Axios это мощный http клиент. Он использует промисы по умолчанию и работает как на стороне клиента так и на стороне сервера(что делает возможным загрузку данных во время рендеринга на сервере). Также эту библиотеку довольно легко использовать в Vue, так как она использует промисы, можно комбинировать ее с async/await чтобы получить лаконичный не громоздкий код отправки запросов.

Установка

Axios можно установить с помощью NPM или Yarn:

# Установка через Yarn
$ yarn add axios -

# Установка через NPM
$ npm i axios -s

Загрузка данных через GET запрос

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

<template>
  <ul v-if="posts &amp;&amp; posts.length">
    <li v-for="post of posts">
      <h2>{{post.title}}</h2>
      <p>{{post.body}}</p>
    </li>
  </ul>

  <p v-if="error">
      {{error.message}}
  </p>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      posts: [],
      error: null
    }
  },

  // Загружаем данный когда компонент создался
  created() {
    axios.get(`${Vue.axios.defaults.baseURL}/posts`)
    .then(response => {
      // JSON ответы автоматически парсяться
      this.posts = response.data
    })
    .catch(e => {
      this.error=e;
    })
  }
}
</script>

Отправка данных с помощью POST запроса

С помощью Axios можно с легкостью отправлять POST, PUT, PATCH, и DELETE запросы

<template>
    <input type="text" v-model="postBody" @change="postPost()"/>
    <p v-if="error">
       {{error.message}}
    </p>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      postBody: '',
      error: null
    }
  },

  // Отправляет данные поста на сервер
  postPost() {
    axios.post(`${Vue.axios.defaults.baseURL}/posts`, {
      body: this.postBody
    })
    .then(response => {})
    .catch(e => {
      this.error=e;
    })
  }
}
</script>

Установка базовой конфигурации для всех запросов

Axios дает возможность создать базовый инстанс который позволяет расширить базовый URL и конфигурацию для всех вызовов инстанса. Это очень удобно если вы работаете с одним API, или вам нужно передавать токен авторизации в всех запросах.

import axios from 'axios';

export const HTTP = axios.create({
   baseURL: `some api url`,
   headers: {
     Authorization: 'Bearer {token}'
   }
 })

Теперь отправка запросов будет выглядеть так:

import {HTTP} from './http-common';

export default {
  data() {
    return {
      posts: [],
      error: null
    }
  },

  created() {
    HTTP.get(`posts`)
    .then(response => {
      this.posts = response.data
    })
    .catch(e => {
      this.error=e;
    })
  }
}