How can I process independent requests concurrently but keep output in input order?

Map your input items to calls of the asynchronous function, then give those returned promises to Promise.all. The operations start as the map calls them; Promise.all collects their results in the order of the input promises, not the order in which the operations finish. [S1]

Here is a runnable example. The setTimeout delays stand in for requests that take different amounts of time:

const items = [
  { id: "A", delay: 300 },
  { id: "B", delay: 100 },
  { id: "C", delay: 200 }
];

function fetchItem(item) {
  return new Promise((resolve) => {
    setTimeout(() => resolve(`Result for ${item.id}`), item.delay);
  });
}

async function main() {
  const results = await Promise.all(items.map(fetchItem));
  console.log(results);
}

main();

The output array is Result for A, Result for B, Result for C, in that order. In this example, B’s operation finishes before A’s, but that does not reorder the collected results. Real request durations vary, so treat the delays as an illustration, not a timing guarantee.

A sequential loop waits for one operation to finish before starting the next. That is appropriate when a later operation depends on an earlier result. If the operations are independent, starting them together avoids making each one wait in turn. [S1]

For example, sequential code might look like this:

const results = [];
for (const item of items) {
  results.push(await fetchItem(item));
}

With the illustrative delays above, that loop starts A, then B, then C; each wait happens after the previous one. With Promise.all(items.map(fetchItem)), the calls are made together, and the combined wait lasts until all results are ready. Actual elapsed time depends on the operations and runtime, so avoid relying on a precise duration. Both approaches preserve input order in this example; the difference is whether the work is started together or one operation at a time.

Keep the source items in a stable array and use the ordered results at matching indexes. If you need the item’s identity later, return it alongside the result rather than assuming a completion order:

const rows = await Promise.all(
  items.map(async (item) => ({
    id: item.id,
    value: await fetchItem(item)
  }))
);

console.log(rows);

Each returned object carries its own id, and the array remains aligned with items. You can then render rows in order or look up the associated identifier. This pattern is useful for ordered lists, previews, and other displays where position or identity matters. It does not establish that the requests succeeded in every situation; add error handling that fits your application.

First ask whether the tasks are genuinely independent. If task B needs a value produced by task A, await A before starting B; Promise.all does not make that dependency disappear. [S1] For independent tasks, make sure the promises are created by calling the operations inside the map. Passing the function references themselves does not start those operations. [S1]

Before displaying results, confirm that the input array’s order is the order you want to preserve. If presentation order should differ, arrange the inputs deliberately or sort the completed result objects by an explicit field. The provided example uses only local placeholder items and simulated delays; it does not demonstrate a real service, request limits, or application-specific failure handling. Those details depend on the system you are connecting to.