How to await async functions in specific sequence using typescript

August 04, 2019

I was posting messages to a slack webhook recently and I wanted to post a list of messages in the correct order. I had to await each one before calling the next. I tried a few different methods but only one worked the way I expected it to.

// 1.  array.forEach - Doesn't work!

listofMessages.forEach(async x => await postMessage(x))

// this doesn't work becuase the foreach creates a new function
// per item and you essentially ignore or throw away the returned Promise.

// 2. foreach (x in y) - Doesn't work and I learned something new!

for (let message in messages) {
  await postMessage(x)
}

// this doesn't work because it's a completely incorrect usage of for..in!
// In JS the for..in construct is designed to be used to iterate over and objects properties
// and it's known to have issues when iterating over an array

// 3. foreach (x of y) - Works! The correct way.

for (let message of messages) {
  await postMessage(x)
}

// this works as expected. Each call is awaited before the loop continues.

Darragh ORiordan

Hi! I'm Darragh ORiordan. I live and work in Auckland, New Zealand 🥝 enjoying the ocean 🏄 and building things on the web 💻 Contact me on Twitter!