Handling multiple awaits

Hey ,

I'm thrilled to help you learn JavaScript. Unfortunately, you've landed on a page where you cannot access with your current purchase.

Please upgrade (use this link) access this content.

I'm super eager to help you learn more!

Handling multiple awaits

await blocks JavaScript from executing the next line of code until a promise resolves. This may have the unintended consequence of slowing down code execution.

To show this in action, we need to create a delay before resolving the promise. We can create a delay with setTimeoout inside a sleep function.

const sleep = ms => {
  return new Promise(resolve => setTimeout(resolve, ms))
}

ms is the number of milliseconds to wait before resolving. If you pass in 1000 into sleep, JavaScript will wait for one second before resolving the promise.

// Using Sleep
console.log('Now')
sleep(1000)
  .then(v => {
    console.log('After one second')
  })

Let’s say we have a function called getOne that takes one second to resolve. To create this delay, we pass 1000 (one second) into sleep. After one second has passed and the sleep promise resolves, we return the value 1.

const getOne = _ => {
  return sleep(1000).then(v => 1)
}

If you await getOne(), you’ll see that it takes one second before getOne resolves.

const test = async _ => {
  console.log('Now')

  const one = await getOne()
  console.log(one)
}

test()

Now let’s say you need to wait for three promises. Each promise has a one-second delay.

const getOne = _ => {
  return sleep(1000).then(v => 1)
}

const getTwo = _ => {
  return sleep(1000).then(v => 2)
}

const getThree = _ => {
  return sleep(1000).then(v => 3)
}

If you await these three promises in a row, you’ll have to wait for three seconds before all three promises get resolved. This is not good because we forced JavaScript to wait two extra seconds before doing what we need to do.

const test = async _ => {
  const one = await getOne()
  console.log(one)

  const two = await getTwo()
  console.log(two)

  const three = await getThree()
  console.log(three)

  console.log('Done')
}

test()

If getOne, getTwo and getThree can be fetched simultaneously, you’ll save two seconds. You can fetch these three promises at the same time with Promise.all.

There are three steps:

1. Create the three promises
2. Add all three promises into an array
3. await the array of promises with Promise.all

Here’s what it looks like:

const test = async _ => {
  const promises = [getOne(), getTwo(), getThree()]
  console.log('Now')

  const [one, two, three] = await Promise.all(promises)
  console.log(one)
  console.log(two)
  console.log(three)

  console.log('Done')
}

test()