Довольно много фреймворков имеют встроенный апи для отправки 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 && 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; }) } }