Await For Each Callback

Question

I have an issue where I need to wait for a foreach loop to return each time. I tried placing await in some places and tried to use a Promise but I can't get it working. Have a look at the below code to understand my question better.

arr = [1, 2, 3];

MyFunction = async function() {
    arr.forEach(async element => {
        setTimeout(() => {
            console.log(element);
        }, 1000); 
    });
    console.log('done');
}

MyFunction();

With this code you get:

done
1
2
3

How do I use await or something to make it come out:

1
2
3
done

You can't do that with a regular foreach loop, you need to wrap it in a custom recursive function or a similar behavior. — briosheje, Sep 27 '18 at 06:46

Blue · Accepted Answer · 2018-09-27T06:56:58.220

2

Check out Promise.all(). Essentially, use .map() on an array to turn it into an array of promises, and then await them all, and then continue execution.

arr = [1, 2, 3];

MyFunction = async function() {
    var promises = arr.map(element => {
        return new Promise((resolve) => {
          setTimeout(() => {
              console.log(element);
              resolve();
          }, 1000); 
        });
    });
    
    await Promise.all(promises);
    console.log('done');
}

MyFunction();

edited Sep 27 '18 at 06:56

answered Sep 27 '18 at 06:46

Blue

22,608
7
62
92

Wow this is awesome. Learnt something new today! Thank you! – Freddy Bonda Sep 27 '18 at 06:51
`map(async element=>...` why make the iterator an async function? Just like *forEach*, *map* will do nothing with the returned Promise. – Kaiido Sep 27 '18 at 06:56
You're right @Kaiido, no async code in there. Updated – Blue Sep 27 '18 at 06:56

t.niese · Answer 2 · 2018-09-27T06:53:30.707

Using async or await does not magically turn a callback based async function into a Promise based you that you could await. So you need to promisify the callback based asnyc code:

return new Promise(resolve => {
  setTimeout(() => {
    console.log(element);
    resolve()
  }, 1000);
})

The arr.forEach will break the Promise chain as you don't save the Promise created in the arrow function, and as of that you cannot wait for them. So you need to use map, and Promise.all:

arr = [1, 2, 3];

MyFunction = async function() {
  await Promise.all(arr.map(async element => {
    return new Promise(resolve => {
      setTimeout(() => {
        console.log(element);
        resolve()
      }, 1000);
    })
  }));
  console.log('done');
}

MyFunction();

If it is required that the async tasks are done in order then you could use a regular for loop.

arr = [1, 2, 3];

MyFunction = async function() {
  for( let element of arr) {
    await new Promise(resolve => {
      setTimeout(() => {
        console.log(element);
        resolve()
      }, 1000);
    })
  }
  console.log('done');
}

MyFunction();

Await For Each Callback

2 Answers2