Пишем AJAX компонент на React. Часть 1. Основа компонента

Библиотека React.js полностью поддерживает технологию AJAX. В этой статье мы рассмотрим написание AJAX компонента на примере таблицы.

В качестве задачи для нашего примера возьмём таблицу со списком пользователей некоторого web приложения. Данный список мы будем получать в формате JSON массива.

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

Для того чтобы запросить данные с сервера используется функция fetch, которая принимает в качестве параметра адрес для запроса.

Успешное выполнение запроса обрабатывается в методе then, а в случае возникновения ошибки сработает метод catch.

Метод json объекта results возвращает полученный массив данных в формате JSON.

В данном примере мы просто получаем с сервера массив данных и в методе then сохраняем его в состоянии компонента.

Приведённый метод loadData не является штатной функцией React и служит только для того чтобы сделать отправку и обработку запроса более удобной. Загружать данные с сервера мы будем перед редерингом компонента и поэтому вызовем его в методе componentWillMount.

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

Теперь нам предстоит самое сложное. Вывести полученные данные на экран в виде таблицы.

Таблицу мы будем формировать как обычно в методе render. Вначале создадим заголовки столбцов, а затем при помощи метода map добавим в качестве строк данные из полученного нами ранее массива.

Теперь компонент полностью готов к работе.

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *