Прелоадер для vue приложения?

Question

[fessss]

Есть приложение на vue. В приложение разное количество ролей и у каждой роли доступ к определённому странице, с которой в свою очередь уходят разные запросы (несколько штук).

Мне нужно сделать некий универсальный прелоадер, отслеживать, что под нужной ролью все запросы ушли и пришли ответы и только потом показывать само приложение.

Как сделать обычный прелоадер знаю, а вот как сделать прелоадер, который смотрит, что все запросы под текущей ролью отработали - не понимаю. Подскажите, что почитать можно. Направьте пожалуйста

Answer 1

[profesor08]

https://developer.mozilla.org/ru/docs/Web/JavaScri...

const loader = async (props) => {
  return await Promise.all(props);
};

await loader([req1(), req2(), req3()]);

Comments

[fessss]

Да отличная идея, спасибо.
Подскажите, а как бы вы реализовали в след случае?

Есть запросы по настройкам пользователя - вызываются при инициализации приложения.
Есть запросы для получения каких-то данных - вызываются уже в отдельном компоненте.

Сделать отдельный компонент прелоадер и перенести в него эти все запросы?

[profesor08]

fessss, я бы сделал раздельно

[fessss]

profesor08, то есть как и сейчас. Тогда как в данном случае воспользоваться promise.all?
я делаю метод в app - и передаю в promise.all запросы из app. А как еще передать запросы из другого компонента?

[profesor08]

fessss, я бы так не делал. Я бы загрузил родителя, загрузил бы для него данные, показывая его прелоадер. Потом показал бы другой компонент, который бы отсылал свой запрос и показывал бы свой прелоадер.

Либо в родителе загрузил бы все данные разом, показывая прелоадер, а после загрузки раскидал бы все по компонентам. А пока данные не загружены, передавал бы в компоненты параметр индикации загрузки.