Содержание
При разработке Vue приложений, рано или поздно возникает необходимость использовать какой-то инструмент для взаимодействия со сторонними API.
Для того, чтобы повзаимодействовать с этим сторонним API нужно выполнить http запрос.
Этот http запрос можно сделать разными способами:
1) С помощью встроенного в javascript объекта XHR
Запросы, которые вы будете писать таким способом, будут содержать достаточно много кода и не очень хорошо читаются. На практике приходится довольно редко видеть применение такого способа взаимодействия с API.
2) С помощью библиотеки jQuery и встроенного в него модуля $.ajax
Библиотека jQuery больше предназначена для работы вне реактивных фреймворков вроде Vue и др. Ее используют для упрощения взаимодействия с DOM. Использовать ее для http запросов во Vue приложении не совсем рационально. Будем слишком много лишних методов, которые не будут использоваться реально.
По читаемости кода jquery тоже не очень хороша.
Библиотека axios
Наиболее распространенной библиотекой для выполнения http запросов на Vue на сегодняшний день является библиотека axios.
Запросы написанные на axios отличаются минимализмом и простотой читаемости кода.
Именно по этой причине во Vue проектах чаще всего используется именно она.
Установка axios
Установка этой библиотеки в проект достаточно простая. Из корня проекта нужно выполнить консольную команду:
npm install axios
В менеджере yarn эта команда выглядит как
yarn add axios
Подробнее про работу с компонентами, как развернуть vue проект и другие вопросы работы с Vue, вы можете посмотреть в моих видеокурсах по Vue
https://webkyrs.info/razdel/vue-js-javascript-freimvork-dlia-sozdaniia-veb-prilozhenii
Сейчас я подробно на них не останавливаюсь.
Использование axios в компонентах
Для того, чтобы использовать библиотеку axios в ваших компонентах, нужно сначала импортировать ее. Для этого используется команда
import axios from 'axios';
Простой GET запрос
Для того, чтобы выполнить простой GET запрос к стороннему API, мы можем воспользоваться следующей конструкцией:
axios.get('https://site.com/api') .then(response => { console.log(response.data); }) .catch(error => { console.log(error); });
Аналогичная форма записи, только с конструкцией await может выглядеть вот так:
async function fetchData() { try { const response = await axios.get('https://site.com/api'); console.log(response.data); } catch (error) { console.log(error); } } fetchData();
Обратите внимание, что данные, которые приходят в ответе находятся в свойстве data объекта response.
Чаще всего сторонние API предоставляют возможность выполнять POST запрос (на добавление элемента сущности), DELETE (на удаление), UPDATE (на обновление какое-то составной части элемента сущности) и PUT (для замены данных в сущности целиком)
Запросы к такому API с помощью axios могут выглядеть следующим образом
POST
async function postData() { try { const response = await axios.post('https://site.com/api/resource', { // данные для создания нового ресурса name: 'John Doe', age: 25 }); console.log(response.data); } catch (error) { console.log(error); } } postData();
PATCH
async function patchData() { try { const response = await axios.patch('https://site.com/api/resource/1', { // данные для частичного обновления age: 31 }); console.log(response.data); } catch (error) { console.log(error); } } patchData();
DELETE
async function deleteData() { try { const response = await axios.delete('https://site.com/api/resource/1'); console.log(response.data); } catch (error) { console.log(error); } } deleteData();
PUT
async function updateData() { try { const response = await axios.put('https://site.com/api/resource/1', { // данные для обновления name: 'New Name', age: 30 }); console.log(response.data); } catch (error) { console.log(error); } } updateData();
Передача API ключа
Иногда для выполнения запросов к стороннему API нужно передать API ключ. Чаще всего этот ключ передается в заголовках и выглядеть это может примерно так.
async function fetchData() { try { const response = await axios.get('https://site.com/api', { headers: { 'Authorization': 'Bearer YOUR_API_KEY' } }); console.log(response.data); } catch (error) { console.log(error); } }
В этой статье мы рассмотрели лишь основы для работы с axios во Vue приложениях. В зависимости от применяемых вами технологий, эти запросы могут каким-либо образом отличаться.
Больше уроков по Vue, можно посмотреть моих видеокурсах
https://webkyrs.info/razdel/vue-js-javascript-freimvork-dlia-sozdaniia-veb-prilozhenii
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Email - зарегистрироваться / войти