How to sequentially (asynchronously) load components in VUE?

Question

JavaScript

Hello.
I have an "orders-list" component that uses an "order" component inside a loop.
The logic is as follows:
the "orders-list" component is loaded on the page and when it is created, a quick request to the backend results in a list of orders (order numbers), for example, 150 orders come immediately (we request an order for the last 10 days and the backend returns 150 order numbers very quickly) , I show 150 placeholders and a loader in the "orders-list" component (which indicate that information about the order will appear here now)

code like this

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

those inside orders-list the order is drawn (inside the order in the create hook there is a request for the backend (getting full information about the order as soon as we got its number))

The problem is that when I get 150 orders and start drawing them, I get 150 requests for backend at the same time .. and I want to get rid of this effect, I want to load detailed information on orders sequentially.
those don't start downloading the 2nd until the 1st has worked well.

I suspect that this needs to be done somehow on promises, but I can’t figure out how.

the idea is this:
1) I got a list of order numbers
2) I run for each order and draw it with the 'order' component
3) I run sequentially, they do not start drawing n-orders until the answer from n-1 comes that all the data has been received

(the idea needs 2 arrays: the first with all order numbers, and the second with the numbers that are loaded and the second one to gradually update and draw the order component from it ... but technically I can’t figure out how to do it)

how can I implement this
(move away from 150 ajax request at the same time, and receive orders sequentially, outputting them by the component in the v-for loop)

Answer 1

Perhaps the idea is wrong, but this option is what first came to mind.

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

Isn't it easier to just ask for 20 full orders at once? And then draw 20 placeholders using scroll/pagination and request 20 new orders from the server?
150 requests - well, that's it.

Answer 3

Promise.All