Как последовательно(асинхронно) загружать компоненты во VUE?

Question

[Александр Панков]

Здравствуйте.
У меня есть компонент "orders-list", внутри которого используется компонент "order" в цикле.
Логика такая:
на странице загружается компонент "orders-list" и при его создании получается быстром запросом к бекенду список заказов (номеров заказов), например приходит сразу 150 (те мы запрашивает заказ за последние 10 дней и бекенд возвращается 150 номеров заказов очень быстро), я в компоненте "orders-list" показываю 150 плейсхолдеров и лоадер (которые говорят о том, что сейчас тут появится инфа о заказе)

код дтакой

<order 
            v-on:successOrderLoad="onSuccessOrderLoad"
            v-for="order in orders" 
            :key="order"
            v-bind:order-num="order">
</order>

те внутри orders-list рисуется order (внутри order в хуке create идет запрос на бекенд (получение полной инфы о заказе как только получили его номер))

Проблема в том, что когда я получаю 150 заказов и начинаю их рисовать, я получаю 150 запросов на бекенд одновременно.. и я хочу избавится от этого эффекта, я хочу загружать детальную инфу по заказам последовательно.
те не начинать загрузке 2ого, пока 1ый не отработал хорошо.

Подозреваю, что это нужно как-то сделать на промисах, но не могу понять как.

по идее так:
1) поулчил список номеров заказов
2) бегу по каждому заказу и отрисовывю его компонентом 'order'
3) причем бегу последовательно, те не приступаю рисовать n-заказ, пока не пришел ответ от n-1, что все данные получены

(ио идее нужно 2 массива: первый со всеми номерами заказов, а второй с номерами, которые загружены и второй постепенно обновлять и из него рисовать компонент order... но технически не могу понять как сделать)

как мне это реализовать
(отойти от 150 аякс запрос одновременно, а получать заказы последовательно, выводя их компонентом в цикле v-for)

Comments

[Егор Живагин]

ИМХО, лучший путь - отдавать с бэкенда не просто номера, а все данные о заказах сразу. 1 запрос вместо 150-ти

[Александр Панков]

Егор Живагин так было сделано, потому что загрузка сей инфы по заказам очень тяжелая (стучимся в кучу таблиц и сервисов) отчего страница грузиться больше 30сек и мы получаем ошибку и ничго не видим вообще (увеличивать таймауты выполнения скриптов - не вариант). Для этого решили показывать сперва плейсхолдеры и постепенно уже показывать инфу, не заставляя менеджера ждать и дать ему возможность сразу работать с заказами (первыми загруженными)

[Александр Панков]

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

[Антон Швец]

Рисуешь 150 плейсов, определяешь что видит пользователь, загружаешь их, можно по очереди или пачками по 5.
Виртуальный скролл можно, наверняка есть либы виртскролл + датагрид со всеми готовыми событиями.

Answer 1

[eugenedrvnk]

Возможно идея неправильная, но этот вариант - то, что первым пришлом в голову.

async function getData(count) {
  for (let i = 0; i < count; i++) {
    let data = await fetch('request to backend');
    if (data.ok) {} // push it to some store
  }
}

Answer 2

[McBernar]

А не проще просто просить сразу 20 полных заказов? И потом по доскроллу/пагинации рисовать 20 плейсхолдеров и запрашивать с сервера новые 20 заказов?

150 запросов — ну такоэ.

Comments

[Александр Панков]

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

[McBernar]

Александр Панков, ну тогда просто загружайте их пачкой. 150 запросов-то зачем? Вынесите заказы из компонента заказа на уровень выше или во vuex.

[Александр Панков]

McBernar, как я и писал выше - этот запрос занимает минуты как не больше

[McBernar]

Александр Панков, один запрос занимает минуты?

[Александр Панков]

McBernar, ну да, если он получает 150 заказов сразу (у заказа есть клиент и его ифна, сам заказ, товары, история изменения, сверка со складом, стучимся в апи карт и т.п.)
1 заказ получить это полсекунды

[McBernar]

Александр Панков, так я об этом же и говорю — зачем грузить все? Грузите пакетами в фоне. Получили 20, доскроллили, получили еще 20. Плюс один запрос на count, чтобы плейсхолдеров нагененировать.

Answer 3

[genius_spirit]

Promise.All