Библиотека React.js полностью поддерживает технологию AJAX. В этой статье мы рассмотрим написание AJAX компонента на примере таблицы.
В качестве задачи для нашего примера возьмём таблицу со списком пользователей некоторого web приложения. Данный список мы будем получать в формате JSON массива.
Вначале создадим конструктор в котором опишем массив, который будет хранить в состоянии компонента список пользователей и адрес по которому этот список будет запрашиваться.
|
1 2 3 4 5 6 7 8 9 |
constructor(props) { super(props); this.state = { users: [], }; this.props = { requestAddress: '', }; } |
Для того чтобы запросить данные с сервера используется функция fetch, которая принимает в качестве параметра адрес для запроса.
Успешное выполнение запроса обрабатывается в методе then, а в случае возникновения ошибки сработает метод catch.
|
1 2 3 4 5 6 7 |
loadData() { fetch(this.props.requestAddress).then(results => { return results.json() }).then(data => { this.setState({users: data }); }).catch(() => { alert('Ошибка!'); }); } |
Метод json объекта results возвращает полученный массив данных в формате JSON.
В данном примере мы просто получаем с сервера массив данных и в методе then сохраняем его в состоянии компонента.
Приведённый метод loadData не является штатной функцией React и служит только для того чтобы сделать отправку и обработку запроса более удобной. Загружать данные с сервера мы будем перед редерингом компонента и поэтому вызовем его в методе componentWillMount.
|
1 2 3 |
componentWillMount() { this.loadData(); } |
Теперь нам предстоит самое сложное. Вывести полученные данные на экран в виде таблицы.
Таблицу мы будем формировать как обычно в методе render. Вначале создадим заголовки столбцов, а затем при помощи метода map добавим в качестве строк данные из полученного нами ранее массива.
|
1 2 |
render() { return ( |
{this.state.users.map(item => { return ( ); }) }
| Имя пользователя | Ф.И.О. | Роль | Заблокирован |
|---|---|---|---|
| {item.Login} | {item.FIO} | {item.UserRole} | ‘ : ‘‘}}> |
); }
Теперь компонент полностью готов к работе.
По существу, сам по себе AJAX запрос в плане разработки на основе библиотеки React ничего сложного не представляет. Вся сложность обычно заключается в той бизнес-логике, что необходимо реализовать на стороне клиента.
AJAX запросы можно отправлять не только в методах жизненного цикла компонента, но и при обработке различных событий (нажатие кнопок и т. д.), но это уже тема для следующей статьи.
Добавить комментарий