PankovAlxndr
@PankovAlxndr
Fullstack web developer

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

Здравствуйте.
У меня есть компонент "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)
  • Вопрос задан
  • 510 просмотров
Пригласить эксперта
Ответы на вопрос 3
@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
  }
}
Ответ написан
Комментировать
@McBernar
А не проще просто просить сразу 20 полных заказов? И потом по доскроллу/пагинации рисовать 20 плейсхолдеров и запрашивать с сервера новые 20 заказов?

150 запросов — ну такоэ.
Ответ написан
@genius_spirit
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы