Задача: создать пользовательский список, с возможностью
фильтрации /
сортировки (сортировка по имени к примеру или дате добавления на сайт), плюс с возможностью
поиска пользователей по части имени к примеру.
Моя реализация:
<br>
class App{<br>
constructor() {<br>
this.page = 1; // текущая страница для отображения<br>
this.start = 0; // стартовый пользоватлей который отображен на тек. странице<br>
this.limit = 5; // максимальное число пользователей на странице<br>
this.total = 0; // общее количество пользователей доступных по данном запросу<br>
this.filters = []; // фильтры для отображения<br>
}<br>
<br>
// управляющий класс, также создаёт объект запроса (доступен в любом месте приложения)<br>
// на сервер , типа :<br>
// {method : 'getUsersList',<br>
// data : {<br>
// page : this.page , // номер страницы с пользователями<br>
// start : this.start , // с какого пользователя начинаем отображение<br>
// limit : this.limit , // лимит отображаемых в списке пользователей<br>
// filters : this.filters // фильтры для отображения пользовательски данных<br>
// }<br>
};<br>
Есть функция, которая создаёт асинхронный запрос на сервер для заполнения поля с пользователями, которая
принимает параметром объект запроса (созданный одним из методов класса App) и вот тут у меня проблемы, т.к.
<br>
function makeRequest (reqObject) {<br>
// делаем запрос на сервер, возвращаем промис...<br>
.then(data=>JSON.parse()) <br>
.then(data=>App.setTotal(data.total); return data )<br>
.then(data=>{ fillUsersField(data); fillRangeField(); return data; }) // заполняем с помощью объекта результата с сервера наше поле пользователей<br>
.then(data=>defineRangeBarClickHandler()); <br>
// назначаем после заполнения обработчики событий для кнопок 1,2,3.. <br>
// которые отображают количество страниц, в них пока главная загвоздка, <br>
// т.к. они же формируются динамически, т.к. под каждый запрос ( в зависимости от фильтров ) <br>
// возвращается разное количество пользователей this.total, и соотвественно будет разное <br>
// количество страниц<br>
};<br>
мне сложно работать с асинхронным кодом, т.к. мало опыта и я не понимаю, как можно концептуально, хотя бы на примере этого мини приложения, осуществлять взаимодействие.
Например, где хранить текущее состояние, т.е. те же фильтры, те же данные о том, какая страница сейчас отображена на данный момент. У меня получаются крокодилы по типу
makeRequest()
, которые делают сразу всё, т.к. данные же получены асинхронно, т.е. приходится их использовать прямо там же где я их и получил с сервера, иначе я пока не могу придумать, т.к. даже если я создам ещё одну функцию
function defineHandlers()
(для назначения обработчиков), я же не смогу подписаться на событие появления с сервера тех или иных данных.
Задача вроде простая, и даже на бэке особых проблем не было в обработке и отправке данных , но вот с этой асинхронщиной на фронте я тону. Подскажите, пожалуйста, как можно разумнее организовать структуру этого приложения? Может быть, есть какие-то интересные паттерны работы с асинхронным кодом? Т.к. с синхронным работать проще, т.к. там более предсказуемый результат.