Handling Asynchronous API Calls with Ordered Results in Vuejs

In my project, I want to implement a feature that calls up to n APIs (where n ≤ 4) to fetch images and then displays them in a list. I use a state called listImages to manage this.

Here’s how it should work:

1. Call all APIs simultaneously.
2. Handle the result of each API separately (i.e., an error from one API should not affect the others).
3. As soon as an image is loaded, it should be displayed in the first unfilled index in the array:

• Image 1 is loading (input1) -> Image1(Loaded with input2)
• Image 2 is loading (input2). -> Image2(loaded with input 1)
• Image 3 is loading (input3).
• Image 4 is loading (input4).

I tried using Promise.all or Promise.allSettled, but it seems they don’t meet my requirements. I want to find a way to call APIs asynchronously but handle the results in the same array, maintaining the order of the requests. How can I do that?

Thank you so much!