Calling async functions from within synchronous loops & keeping the results ordered

Question

async function processArray(array) {
  let myOrderedArray = [];

  for (const item of array) {
    const value = await getValue(item);
    myOrderedArray.push(value);
  }

  return myOrderedArray;
}

I want to go through the array, for each item perform an async operation, and then save the value I get back in a different array. This results array is ordered: I want the result value for item1 appear in the result at position 1, before item2, and so on.

However, these are async calls. I cannot be sure that my async function calls return in the exact same order, since they're, well, not synchronous. How can I achieve something like this?

Does this answer your question? [Asynchronous Process inside a javascript for loop](https://stackoverflow.com/questions/11488014/asynchronous-process-inside-a-javascript-for-loop) — Inch High, Mar 16 '20 at 12:08
This might be useful i guess https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of — Code Maniac, Mar 16 '20 at 12:08

score 2 · Answer 1 · answered Mar 16 '20 at 12:10

2

Since you are awaiting the getValue function, the sequence will be maintained although it is asynchronous call. The push function will not be called till the time first call is successful. for...of loop respects the asynchrouns promise code.

answered Mar 16 '20 at 12:10

Ashish Modi

7,529
2
20
35

score 1 · Answer 2 · answered Mar 16 '20 at 12:09

Your code already guarantees they'll be in order, but it does it in a slow way. Your code will run until the first await and then block until it gets the value. Only once it has the first value will it loop, and then block again for the second value.

If you want to do them all in parallel, then you'll want to create an array of promises, and use Promise.all to wait for them all to finish.

async function processArray(array) {
  const promises = array.map(item => getValue(item));
  const myOrderedArray = await Promise.all(promises);
  return myOrderedArray;
}

If you're not doing anything with myOrderedArray inside process array, then you can simplify this to:

function processArray(array) {
  const promises = array.map(item => getValue(item));
  return Promise.all(promises);
}

score 0 · Answer 3 · answered Mar 16 '20 at 12:09

0

async function processArray(array) {

  return array.map(async item => {
    return await getValue(item);
  })
}

promise in promises is ordered

answered Mar 16 '20 at 12:09

2239559319

114
1

Calling async functions from within synchronous loops & keeping the results ordered

3 Answers3