DEV Community

Better ways to use async functions in Javascript

Aditya Bhattad on July 21, 2024

If you are into web development, there is a 100% chance you have used at least some async functions. There are different ways to use async function...

Read full post

𒎏Wii 🏳️‍⚧️ • Jul 22

// Start both fetches concurrently
  const fastDataPromise =  fetchFastData();
  const slowDataPromise =  fetchSlowData();

  // Wait for both promises to resolve
  const [fastData, slowData] = await Promise.all([fastDataPromise, slowDataPromise]);

With the existence of Promise.all, this is definitely the "right" way of doing this, but it isn't technically the only one:

   const fastDataPromise =  fetchFastData()
   const slowDataPromise =  fetchSlowData()

   const fastData = await fastDataPromise
   const slowData = await slowDataPromise

As you can probably tell, this approach can lead to much less readable code, which is why a solution like Promise.all makes sense.

But we can also implement our own Promise.all this way:

const simple_promise_all = async (promises) => {
   for (i in promises) {
      promises[i] = await promises[i]
   }
}

To make the code shorter, this version just writes the results back into the same array and ignores rejected promises, but it shows how there isn't actually any magic behind Promise.all.

AndrewBarrell1 • Jul 22

Your simple_promise_all isn't equal to Promise.all though, no?

Your's doesn't reject if any reject, and it waits for each resolve/reject sequentially, where as Promise.all tries to resolve all of them at the same time.

In your example, with 10 requests that each take approx. 2 seconds to resolve, you would need to wait 20 seconds. With Promise.all it would be 2 seconds.

𒎏Wii 🏳️‍⚧️ • Jul 22

Your's doesn't reject if any reject

Yes, as I pointed out, I ignored that feature to keep my example short.

and it waits for each resolve/reject sequentially, where as Promise.all tries to resolve all of them at the same time.

Both approaches resolve all of the promises at the same time, one of them just hides the implementation so you don't really think about how it's done.

In your example, with 10 requests that each take approx. 2 seconds to resolve, you would need to wait 20 seconds. With Promise.all it would be 2 seconds.

It would be 2 seconds (give or take) in both cases. awaiting a promise doesn't pause the others, so while the loop is waiting for the first one, the other promises are all still running. Once the first one finishes, the other promises will all be finished too or just about to, so awaiting them is basically just collecting their results.

AndrewBarrell1 • Jul 22

You are right, I brain farted 😂

𒎏Wii 🏳️‍⚧️ • Jul 22 • Edited

Just for fun, here's a more complete implementation:

const promise_all = (promises) => new Promise(async (resolve, reject) => {
   result = []

   promises
      .filter(value => value instanceof Promise)
      .each(promise => promise.catch(reject))

   for (i in promises) {
      const p = promises[i]
      if (p instanceof Promise)
         result[i] = await p
      else
         result[i] = p
   }]
   resolve(result)
})

Richard Remer • Jul 23

If you remove the "p instanceof Promise" check it still works fine, but it also handles the case where "p" is a then-able; that is a promise that doesn't extend Promise. Await can be used on synchronous values without trouble, so no need to branch.

Aditya Bhattad • Jul 23

Good point!

AndrewBarrell1 • Jul 22 • Edited

A very important note for using timeouts with Promise.race()

When you have a timeout, while the promise may resolve or reject, the timeout will keep running, keeping the execution alive.

So if the success case passes after 1 second and the program's logic ends, the timeout set for 5 seconds will keep going for another 4 seconds and only then will the process' execution end.

This can be really important in serverless Lambdas where you pay for run time.

const timeoutRace = async (promise, ms) => {
  let timer = null

  const timeoutFn = new Promise((resolve, reject) => {
    timer = setTimeout(reject, ms)
  })

  try{
    const myRace = await Promise.race([promise, timeoutFn])

    clearTimeout(timer)

    return myRace
  } catch (error) {
    console.error("race error")
  }
}

timeoutRace(myFetchAPICall, 10000)

In the above example, if the fetch API call succeeds after 500ms, the process ends.

Without clearing the timer as in your example, the process would continue for another 9.5 seconds before ending.

(On mobile, forgive any typos/autocorrects)