Axios или Fetch: чем пользоваться в 2019 году?
Axios — это широко известная JavaScript-библиотека. Она представляет собой HTTP-клиент, основанный на промисах и предназначенный для браузеров и для Node.js. Если вы работали в последние несколько лет JavaScript-программистом, то вы, совершенно определённо, этой библиотекой пользовались. В октябре 2019 года пакет Axios был загружен из npm 25 миллионов раз. Кажется, что будущее Axios безоблачно. Но что если я скажу вам, что Axios — это мёртвый проект. Именно этому было посвящено одно обсуждение на Reddit. А именно, речь идёт о следующем:
Когда библиотека Axios стала популярной, в браузерах не было API, реализующего HTTP-клиент, основанный на промисах. Стандартный интерфейс XML HTTP Request (XHR) был неудобным, работать с ним было тяжело. Разработчики с радостью приняли Axios из-за того, что эта библиотека облегчала им жизнь.
В 2015 вышел API Fetch. Почему же мы, в 2019 году, до сих пор используем Axios? Давайте сравним эти две технологии.
Объём шаблонного кода
▍Fetch
▍Axios
При использовании Fetch приходится иметь дело с двумя промисами. А вот при работе с Axios у нас есть прямой доступ к JSON-результату в свойстве data объекта ответа.
Метод json() миксина Body принимает поток Response и полностью читает его. Он возвращает промис, который разрешается JSON-результатом разбора текста тела запроса.
Ещё больше шаблонного кода в Fetch приходится использовать при работе с POST-запросами.
▍Fetch
▍Axios
Использование Axios позволяет избежать написания больших объёмов шаблонного кода и сделать код чище и понятнее.
Обработка ошибок
▍Fetch
▍Axios
Отсутствующие возможности
Axios умеет следить за ходом выгрузки данных. Fetch это не поддерживает. Это может стать решающим фактором выбора технологии для тех, кто разрабатывает приложение, позволяющее пользователям выгружать на сервер фотографии или видеофайлы.
Альтернативные библиотеки
Вот пара альтернатив Axios и API Fetch:
Итоги
Чем стоит пользоваться в 2019 году? Это зависит от многого. Например, если вам нужно отслеживать прогресс выгрузки материалов на сервер, то вам лучше всего подойдёт Axios или Superagent. Если вы можете справиться с ограничениями Fetch — тогда вам лучше воспользоваться именно этим API. А для того, чтобы немного улучшить Fetch-код, попробуйте библиотеку-обёртку наподобие Ky.
Уважаемые читатели! Какими HTTP-клиентами вы пользуетесь в своих проектах?
Данный материал является частью цикла статей «Основы Vue.js». Не забудьте посмотреть другие статьи по этой теме 🙂
Пришло время получить актуальные данные из нашей серверной части и отобразить их в наших компонентах. Для этого нам нужно использовать клиентскую библиотеку HTTP, а поскольку Vue.js не имеет своей собственной, мы собираемся использовать Axios. Кроме того, нам необходимо настроить Axios для отправки запросов на наш внутренний сервер в зависимости от окружения, в которой находится наше приложение.
Настройка переменных окружения
Чтобы реализовать это поведение, нам нужно изменить файлы окружения.
В каталоге config у нас есть файлы среды. Давайте откроем файл config/dev.env.js и добавим в него новую переменную окружения:
Проделаем то же самое с файлом config/prod.env.js :
Теперь нам нужно установить Axios и настроить его для использования этих переменных.
Установка Axios
После того, как мы закончили с переменными окружения, пришло время создать нашу первую службу API, с помощью которой необходимо собирать некоторые данные из нашей серверной части.
Создание службы API
В этом файле мы собираемся реализовать наши вызовы Axios на бэкэнд, и рекомендуется создавать отдельные служебные файлы API для каждой сущности в нашей базе данных или ресурсе RESTful.
Далее импортируем Axios и реализуем вызовы RESTful в нашем файле owner.service.js :
Просто для целей тестирования импортируем наш сервис API в компонент Home.vue и проверим, работает ли она.
Получение данных из серверной части
Запустим наше приложение с npm run dev и введем http://localhost:8080 в веб-браузере. Затем мы собираемся открыть DevTools (F12), переключиться на Console и перезагрузить нашу страницу. Мы должны увидеть следующий результат:
Заключение
Теперь вы готовы создавать новые компоненты и отображать данные, которые будете получать от серверной части.
Прочитав этот пост, вы узнали:
В следующей части вы узнаете, как создавать собственные компоненты и отображать данные, полученные из серверной части.
Как использовать Vue.js и Axios для отображения данных из API
Статья предназначения для новичком с Vue.js. В ней рассказывается о том как использовать Axios для получения данные из внешнего API
Введение
Vue.js — это JavaScript-фреймворк для создания пользовательских интерфейсов. Он хорошо интегрируется с другими библиотеками или существующими проектами. Это делает его подходящим инструментом как для небольших проектов, так и для сложных одностраничных приложений.
API, или интерфейс прикладного программирования, является программным посредником, который позволяет двум приложениям общаться друг с другом. API часто предоставляет данные, которые другие разработчики могут использовать в своих собственных приложениях, не беспокоясь о базах данных или различиях в языках программирования. Разработчики часто получают данные из API в формате JSON, которые они интегрируют в интерфейсные приложения. Vue.js отлично подходит для использования этих видов API.
В этом руководстве вы создадите приложение Vue, которое использует Cryptocompare API для отображения текущих цен двух ведущих криптовалют: Bitcoin и Etherium. В дополнение к Vue вы так же используете библиотеку Axios для выполнения запросов API и обработки полученных результатов. Axios отличный выбор для этих целей, потому что она автоматически преобразует данные JSON в объекты JavaScript а так же поддерживает Promises, что позволяет создавать код, который легче читать и отлаживать. И чтобы все выглядело красиво, мы используем фреймворк Foundation CSS для стилей.
Примечание: API Cryptocompare бесплатно лицензируется только для некоммерческого использования. Смотрите их условия лицензирования, если вы хотите использовать его в коммерческом проекте.
Шаг 1 — Создание базового приложения Vue
Давайте создадим базовое приложение на Vue. Мы создадим одну HTML-страницу с некоторыми фейковыми данными, которые в конечном итоге заменим на реальные данные из API. Для этого первого шага мы будем хранить весь код в одном файле.
Создайте новый файл index.html, используя ваш текстовый редактор.
В этом файле добавьте следующую HTML-разметку, которая определяет HTML-скелет, стили из среды Foundation CSS и библиотеку Vue.js из CDN. Используя CDN, вам не нужно загружать дополнительный код, чтобы начать работу над app.index.html.
Строка << BTCinUSD >> является заполнителем для данных, которые предоставит Vue.js. Таким образом Vue позволяет нам визуализировать данные в пользовательском интерфейсе. Давайте определим эти данные.
Этот код создает новый экземпляр приложения Vue и присоединит экземпляр Vue к элементу с id app. Vue называет этот процесс монтированием приложения. Мы определяем новый экземпляр Vue и настраиваем его, передавая объект конфигурации. Этот объект содержит опцию el, которая указывает идентификатор элемента id, к которому мы хотим подключить это приложение, и опцию data, которая содержит данные, которые мы хотим получить для представления.
В этом примере наша модель данных содержит одну пару ключ-значение, которая содержит фиктивное значение для цены Биткойна: BTCinUSD: 3759.91. Эти данные будут отображаться на нашей HTML-странице или в нашем представлении в том месте, где мы заключили переменную в двойные фигурные скобки, например:
В конечном итоге мы заменим это жестко запрограммированное значение реальными данными из API.
Откройте этот файл в вашем браузере. Вы увидите следующий вывод на вашем экране, который отображает фиктивные данные:
Мы показываем цену в долларах США. Чтобы отобразить его в дополнительной валюте, например в евро, мы добавим еще одну пару ключ-значение в нашу модель данных и добавим еще один столбец в разметке. Сначала измените модель данных: index.html
Затем добавьте новый раздел в разметку, который отображает цену в евро ниже существующего code.index.html
Теперь сохраните файл и перезагрузите его в вашем браузере. Приложение теперь отображает цену Биткойн как в евро, так и в долларах США.
Теперь давайте разделим весь код по разным файлам.
Шаг 2 — Разделение JavaScript и HTML
Чтобы посмотреть, как все работает, мы поместили весь код в один файл. Теперь давайте разделим код приложения на два отдельных файла, index.html и vueApp.js. Файл index.html будет обрабатывать часть разметки, а файл JavaScript будет содержать логику приложения. Это сделает наше приложение более удобным в обслуживании. Мы будем хранить оба файла в одном каталоге.
Сначала измените файл index.html и удалите код JavaScript, заменив его ссылкой на файл vueApp.js.
Найдите этот раздел файла: index.html
И измените его так, чтобы он выглядел так: index.html
Затем создайте файл vueApp.js в том же каталоге, что и файл index.html.
Шаг 4 — Получение данных из API
Пришло время заменить наши макетные данные живыми данными из API-интерфейса cryptocompare, чтобы показать цену Bitcoin и Ethereum на веб-странице в долларах США и евро.
Чтобы получить данные для нашей страницы, мы сделаем запрос по следующему URL, который запрашивает Bitcoin и Etherium в долларах США и евро:
Этот API вернет JSON-ответ. Используйте curl, чтобы сделать запрос к API, чтобы увидеть ответ:
Вы увидите вывод так:
Этот результат выглядит точно так же, как жестко закодированная модель данных, которую вы использовали на предыдущем шаге. Все, что нам нужно сделать сейчас, это удалить текущие данные и сделать запрос на этот URL из нашего приложения.
Сначала откройте index.html и загрузите библиотеку Axios, добавив скрипт под строкой, в которую вы включили Vue: index.html.
Сохраните файл, затем откройте vueApp.js и измените его, чтобы он отправлял запрос в API и заполнял модель данных results.vueApp.js.
Обратите внимание, что мы удалили значение по умолчанию для results и заменили его пустым массивом. У нас не будет данных при первой загрузке нашего приложения, но мы не хотим, чтобы что-то сломалось. Наше представление HTML ожидает, что некоторые данные будут перебираться при загрузке.
Функция axios.get использует Promise. Когда API возвращает данные успешно, выполняется код в блоке then, и данные сохраняются в нашей переменной results.
Сохраните файл и перезагрузите страницу index.html в веб-браузере. На этот раз вы увидите текущие цены на криптовалюты.
Заключение
Менее чем за пятьдесят строк вы создали приложение, работающее с API, используя только три инструмента: Vue.js, Axios и API Cryptocompare. Вы узнали, как отображать данные на странице, перебирать результаты и заменять статические данные результатами API.
Теперь, когда вы понимаете основы, вы можете добавить другие функции в ваше приложение. Измените это приложение для отображения дополнительных валют или используйте методы, которые вы изучили в этом руководстве, для создания других веб-приложений с использованием другого API.
Получение данных из стороннего API с помощью Vue.js и Axios
Чаще всего при создании приложения JavaScript вы хотите получать данные из удалённого источника или использовать API. Есть много интересных вещей, которые можно сделать с данными из ряда общедоступных API.
С Vue.js вы можете буквально создать приложение на основе одной из этих служб и начать предоставлять контент пользователям за считанные минуты.
Я продемонстрирую, как создать простое новостное приложение, которое будет показывать самые популярные новостные статьи дня и позволит пользователям фильтровать их по интересующей их категории, получая данные из New York Times API.
Вот как будет выглядеть окончательное приложение:
Чтобы следовать этому руководству, вам потребуются установленные на вашем компьютере Node.js и (необязательно) Yarn. Чтобы установить Node, вы можете либо перейти на официальную страницу загрузки и загрузить двоичные файлы Node для своей системы, либо вместо этого использовать диспетчер версий.
После установки Node, чтобы получить Yarn, запустите:
Вам также потребуются базовые знания Vue.js. Здесь вы можете найти отличное руководство по началу работы.
Получить ключ API
Чтобы использовать API NYTimes, вам потребуется ключ API. Так что, если у вас его ещё нет, перейдите на их страницу регистрации и зарегистрируйтесь, чтобы получить ключ API для Top Stories API.
Мы будем использовать конечную точку API главных историй для извлечения данных из. Обратите внимание, что этот API содержит несколько разделов, таких как «дом», «путешествия», «искусство» и «наука». Нам нужно будет создать фильтр, который позволит пользователям выбирать раздел и загружать в него истории.
Ниже приведены примеры вызовов:
Не стесняйтесь использовать свой любимый клиент REST (например, Hoppscotch или Insomnia ) для тестирования вызовов API.
Структура проекта
Давайте быстро развернём проект Vue 3 с помощью Vite, сервера разработки, который работает быстрее, чем Vue CLI :
Откройте localhost:3000в своём браузере. У вас должно получиться следующее представление:
Затем давайте установим фреймворк TailwindCSS, чтобы обеспечить базовый стиль. Вам нужно будет остановить сервер, чтобы выполнить это действие:
Нам понадобятся дополнительные служебные программы пакета, которые помогут нам отформатировать даты и ограничить количество строк для abstractполя:
@tailwindcss/line-clampэто плагин, который необходимо включить в tailwind.config.js. Ниже представлена полная конфигурация:
Затем создайте index.css файл в src папке и добавьте этот код:
Помимо импорта необходимых классов CSS Tailwind, мы включили несколько настроек CSS, которые помогут нам определить тему по умолчанию для нашего приложения. Мы также внедрили систему гибкого макета, чтобы помочь нам создать липкий верхний и нижний колонтитулы для нашего приложения.
Нам нужно будет импортировать index.css в src/main.js:
Теперь давайте продолжим и определим макет нашего приложения. Сначала удалите все существующие компоненты в src/components. Затем в той же папке создайте эти три файла:
Скопируйте следующий код для каждого файла:
src / components / Footer.vue :
src / components / Header.vue :
src / components / Layout.vue :
Наконец, обновите src/App.vue:
Выполнить yarn dev. Браузер должен обновиться автоматически.
После завершения макета приложения мы можем приступить к построению основной логики нашего новостного приложения.
Создание компонентов новостного приложения
Структура нашего приложения будет состоять из трёх компонентов News и одного контейнера src/App.vue. Контейнер будет отвечать за выборку данных публикации и заполнение компонентов.
Во-первых, нам нужно разработать макет и найти эти компоненты. Следовательно, для начала нам нужны фиктивные данные. Создайте файл src/posts.json и заполните его следующими данными:
Я бы посоветовал вам продублировать записи, чтобы лучше протестировать наши макеты дизайна компонентов, но я не буду делать этого здесь из-за нехватки места.
Теперь приступим к созданию наших компонентов новостей. В src/components папке создайте следующие файлы:
Просто чтобы визуализировать, как все эти компоненты объединяются, импортируйте их src/App.vue и расположите следующим образом:
Разберём приведённый выше код:
Теперь приступим к работе с каждым отдельным компонентом новостей. NewsCard.vue Компонент будет представлять данные для одного поста. Требуется одна опора post:
Он NewsList.vue будет проходить через массив сообщений и заполнять NewsCards адаптивную сетку:
Далее у нас есть NewsFilter компонент, который позволит пользователям загружать сообщения из разных разделов. Во-первых, нам нужен файл содержимого для хранения всех разделов, поддерживаемых конечной точкой Top Stories API. Создайте файл src/components/sections.js:
Давайте теперь создадим наш NewsFilter.vue, который содержит раскрывающийся список ввода и кнопку. Нам нужно будет использовать v-model для привязки состояния section таким образом, чтобы оно синхронизировалось с состоянием в App.vue:
Статья » Vue 3: Data down, Events up » лучше всего объясняет стратегию, которую мы используем для привязки section состояния к NewsFilter компоненту. По сути, это позволяет дочерним компонентам обновлять реквизиты и синхронизироваться с родительским компонентом.
Ниже приведён снимок экрана текущего состояния приложения:
Использование Axios для получения удалённых данных
Axios — это HTTP-клиент, основанный на обещаниях, для выполнения запросов Ajax, который отлично подходит для наших целей. Он предоставляет простой и богатый API. Он очень похож на fetch API, но без необходимости добавления полифилла для старых браузеров и некоторых других тонкостей.
Чтобы установить axios, запустите:
Разработка пользовательского интерфейса нашего приложения завершена. Теперь нам нужно только реализовать логику удалённой выборки. Ниже приведён пример полного формата URL, ожидаемого службой NYTimes API:
Во-первых, давайте сохраним наш ключ API в.env файле в корне нашего проекта. Сохраните в следующем формате:
Замените хэши своим фактическим ключом API.
Поскольку мы используем Vite, нам необходимо соблюдать руководство Vite по загрузке переменных среды. Vue / CLI имеет свои собственные инструкции для того же.
Давайте теперь реализуем логику, которая будет получать фактические сообщения из конечной точки NYTimes REST API. Просто обновите src/App.vue соответственно:
Здесь мы создали функцию с именем, fetchNews которая содержит логику для выполнения логики выборки. Эта функция будет вызываться из двух мест:
Давайте разберём функцию, чтобы убедиться, что мы понимаем, что происходит:
Теперь взгляните на раздел шаблонов и обратите внимание, что мы включили новую опору с именем fetch, которая ссылается на fetchNews функцию. Нам нужно обновить, src/components/NewsFilter.vue чтобы принять эту опору. Ниже я выделил только те разделы кода, которые вам следует изменить:
Возможно, вам потребуется перезапустить сервер разработки, чтобы правильно загрузить библиотеку axios и ключ API. Как только вы это сделаете, у вас должны появиться актуальные сообщения. Ниже показано текущее состояние приложения.
У вас должна быть возможность переключать и загружать разные разделы новостей.
Используем axios вместе с Vue.js
Начиная с версии 2.0 разработчики vue.js посчитали наличие встроенного http модуля избыточным, и теперь считается хорошим тоном использовать сторонние решения.
Таким решением и является Axios
Axios это отличная клиентская библиотека, которая использует промисы по умолчанию, а так же работает как на сервере(что делает его подходящим для получения данных при рендеринге на сервере), так и на клиенте. Axios очень легко начать использовать с vue.
Установка
Установить можно с помощью npm или Yarn:
Получаем данные с помощью GET запроса
Это считается плохой практикой, однако вы можете использовать axios непосредственно в своих компонентах, в хуках жизненного цикла, из метода либо любым другим способом.
Отправляем данные POST запросом
Список запросов которые можно сделать: PUT, DELETE, PATCH и POST
Common Base Instance
Часто забываемая, но очень полезная возможность, предоставляемая axios, — это возможность создать базовый экземпляр, который позволяет вам обмениваться общим базовым URL-адресом и конфигурацией во всех вызовах экземпляра. Это пригодится, если все ваши вызовы относятся к определенному серверу или им необходимо обмениваться заголовками, например заголовком авторизации.
Теперь можно использовать http вот так:
Мы рассмотрели лишь базовые возможности axios, дополнительная информация и документация на официальном сайте.
