How to await async functions in specific sequence using typescript

Published on 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!
// In JS the 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 Sydney, Australia enjoying the mountains and the ocean.

I build and support happy teams that create high quality software for the web.

Contact me on Twitter!

Get new writings, curated tech articles and coding tips!