Используем axios вместе с Vue.js
Перевод статьи Joshua Bemenderfer: Vue.js REST API Consumption with Axios
Довольно много фреймворков уже имеют свои встроенные модули для работы с API. Во втором ангуляре это http-модуль, в jquery это $.ajax, и вплоть до версии 2.0, vue так же имел свой модуль для работы с api — vue-resource.
Начиная с версии 2.0 разработчики vue.js посчитали наличие встроенного http модуля избыточным, и теперь считается хорошим тоном использовать сторонние решения.
Таким решением и является Axios
Axios это отличная клиентская библиотека, которая использует промисы по умолчанию, а так же работает как на сервере(что делает его подходящим для получения данных при рендеринге на сервере), так и на клиенте. Axios очень легко начать использовать с vue.
Приступим!
Установка
Установить можно с помощью npm или Yarn:
$ yarn add axios $ npm i axios -S
Получаем данные с помощью GET запроса
Это считается плохой практикой, однако вы можете использовать axios непосредственно в своих компонентах, в хуках жизненного цикла, из метода либо любым другим способом.
Отправляем данные POST запросом
Список запросов которые можно сделать: PUT, DELETE, PATCH и POST
Common Base Instance
Часто забываемая, но очень полезная возможность, предоставляемая axios, — это возможность создать базовый экземпляр, который позволяет вам обмениваться общим базовым URL-адресом и конфигурацией во всех вызовах экземпляра. Это пригодится, если все ваши вызовы относятся к определенному серверу или им необходимо обмениваться заголовками, например заголовком авторизации.
Теперь можно использовать http вот так:
Итог:
Мы рассмотрели лишь базовые возможности axios, дополнительная информация и документация на официальном сайте.
