Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

Получение данных в вашем React приложении

by
Difficulty:IntermediateLength:ShortLanguages:

Russian (Pусский) translation by Oleg Kiselevich (you can also view the original English article)

React считается самой популярной библиотекой для создания интерактивных приложений. Однако, React не является полноценным web фреймворком. Она фокусируется только на одной части известной модели MVC - и это view (вид).

Существует целая React экосистема, направленная на решение других аспектов проекта. В этом уроке вы узнаете о работе с одним из самых базовых из них для любого web приложения - о том, как получать данные для отображения. И это не так уж и просто. Существует несколько мест в иерархии компонента React, где вы можете получать данные. Но когда именно это делать - уже другая история. Вам также нужно определить, какую технологию для получения данных использовать и где потом хранить эти данные.

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

С чего начать

Давайте создадим каркас нашего React приложения с помощью create-react-app:

> create-react-app react-data-fetcher

В результате получаем достаточно продуманную структуру каталогов. Прочитайте замечательный файл README, если вы не знакомы с create-react-app.

Создание простого сервера

Я создал простой сервер для хранения и вывода цитат. Он не является основной темой этого урока, и его роль сводится к тому, чтобы предоставить удаленный API для демонстрации того, как получать данные в React. Чтобы удовлетворить ваше любопытство, скажу, что это приложение, написанное на Python 3 и основанное на фреймворке hug, созданное с использованием Redis в качестве постоянного хранилища.

API - очень прост. Есть единая точка входа /quotes. Он выводит все сохраненные цитаты в ответ на HTTP GET запрос, а также дает возможность добавлять новые цитаты с помощью отправки HTTP POST запроса.

Полный исходный код доступен на GitHub.

Знакомство с демонстрационным приложением

Демонстрационным выступает React приложение, которое обращается к сервису цитат, выводит все цитаты и позволяет добавлять новые.

Вот снимок экрана:

A screenshot of the demo application

Структура приложения очень проста. Я начал с каркаса, созданного с помощью create-react-app и добавил два компонента в дочерней директории: QuoteList и AddQuoteForm. Вот как выглядит структура каталогов (за исключением node_modules):

Полный исходный код доступен на GitLab.

Отображение цитат

Функциональный компонент QuoteList выводит список цитат в виде обычного маркированного списка. Ему необходимо передать массив строк:

Этот компонент является дочерним основного компонента App.

Получение данных с помощью Fetch API

Fetch API является API, основанном на промисах, которое возвращает объект ответа. Для доступа непосредственно к JSON содержимому, необходимо вызвать метод json() возвращенного объекта.

Добавляем код получения данных

Конечно React полностью сводиться к компонентам. Но важным является и вопрос о том, в каком именно месте разместить код получения данных. Если вы правильно построите свой код, то должно получиться много компонентов общего назначения и только несколько компонентов для работы самого приложения. React и JavaScript в целом достаточно гибкие технологии, что делает возможным внедрение команд в любом месте.

Получение цитат с помощью REST API требует определенный вид периодичных запросов, поскольку я хочу, чтобы список цитат был всегда актуальным. Но важную роль играет и первоначальное получение данных. У компонентов React есть методы жизненного цикла, в которых можно применять команды, выполняемые в определенное время.  Метод componentDidMount() вызывается, когда компонент становится доступным и его состояние изменилось. Это отличное место для выполнения получения данных.

Вот как это выглядит:

Если вы желаете сократить время загрузки первого шаблона, то можно задуматься об использовании componentWillMount() для асинхронного получения данных, но в таком случае получение данных может завершиться раньше того, как завершено монтирование компонента. Я такой подход не рекомендую.

Изучите Освоение Методов жизненного цикла React для более близкого знакомства.

Выбор частоты получения данных

Первоначальное получение данных в componentDidMount() работает хорошо, но мне бы хотелось обновлять список цитат почаще. В REST-подобном API единственным решением является периодический опрос сервера. Сервис цитат очень упрощен и потому всегда выдает список всех цитат. 

Более сложные сервисы могут предоставлять способы проверки обновлений или даже использовать заголовки HTTP if-modify-since или eTag. Наше демонстрационное приложение просто получает все данные каждые пять секунд за счет установки таймера в componentDidMount() и обнуления его в componentWillUnmount():

Длительность подобных интервалов стоит определять, исходя из требований приложения. Если вам нужны обновления в реальном времени и(или) опросы сервера сильно нагружают ваш бэк-енд, то задумайтесь об использовании WebSockets вместо REST.

Справляемся с получением данных с длительным временем выполнения запроса

Иногда получение данных может занять долгое время. В таком случае стоит улучшить жизнь для пользователей с помощью отображения полосы прогресса загрузки или какой-либо анимации.  Это особенно важно в случаях, когда получение данных вызвано по действию пользователя (например при нажатии на кнопку поиска).

В демонстрационном приложении я просто вывожу сообщение "Получение цитат..." во время получения данных. В методе render() главного компонента App я использую условный вывод с проверкой состояния state.isFetching.

Метод fetchQuotes() сам обновляет значение state.isFetching на true в момент начала запроса, и обратно на false, когда получение цитат завершено:

Работа с ошибками

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

Fetch API или Axios

У fetch API имеется несколько недостатков. Он требует дополнительного действия для получения JSON из ответа. Также он не отлавливает все ошибки.  Например, ошибка 404 возвращается как обычный ответ. Вам нужно самим проверять код ответа и разбираться с ошибками сети, которые были получены.

Таким образом вам придется обрабатывать ошибки дважды. Но вы можете воспользоваться библиотекой axios.js для решения этих проблем и получения более цельного кода, за что придется добавить еще одну внешнюю зависимость. Вот как выглядит код с axios:

Улучшений немного, но они очень полезны. Код для добавления новой цитаты тоже выглядит намного чище с axios. Вот версия fetch:

А вот версия axios:

Заключение

В этом уроке вы научились асинхронному получению данных в React приложении. Вы обсудили соответствующие методы жизненного цикла, опрос сервера, отслеживание прогресса загрузки и работу с ошибками.

Мы ознакомились с двумя библиотеками, основанными на промисах: fetch API и axios.js. Теперь пришло время создать замечательные React приложения, которые получают данные из удаленных API.

За последние несколько лет популярность React возросла. Кстати, у нас есть несколько продуктов, которые вы можете купить, просмотреть, применить и т.п. Если вы ищете дополнительные ресурсы по React, смело переходите по этой ссылке.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.