Как в данном случае спроектировать архитектуру?

Question

[Muranx]

Задача: создать пользовательский список, с возможностью фильтрации / сортировки (сортировка по имени к примеру или дате добавления на сайт), плюс с возможностью поиска пользователей по части имени к примеру.
Моя реализация:

<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() (для назначения обработчиков), я же не смогу подписаться на событие появления с сервера тех или иных данных.
Задача вроде простая, и даже на бэке особых проблем не было в обработке и отправке данных , но вот с этой асинхронщиной на фронте я тону. Подскажите, пожалуйста, как можно разумнее организовать структуру этого приложения? Может быть, есть какие-то интересные паттерны работы с асинхронным кодом? Т.к. с синхронным работать проще, т.к. там более предсказуемый результат.