Avoid async/await hell

Judicaël Andriamahandry — Mon, 28 Feb 2022 06:45:44 +0000

Escape from the async/await hell or avoid the chained async tasks

First of all let's talk about async/await hell , and then we'll see how to avoid it

TL;DR

This is the async/await hell we're talking about, it's just as an example, there's more.

const user = await getUser(id);
const items = await getItems();
return {
  user,
  items,
};

Here we're fetching the specific user details and then fetching a list of items after. You may say, what's wrong with that?, the thing is that we're waiting to get the user details before getting the list of items, althought fetching the list of items doesn't depends on the user list. So why bother waiting if we could run them in parallel?. In addition that reduce the perfomance.

Now, consider this example:

  (async () => {
    const user = await getUser(id);
    const items = await getItems();
    return {
      user
       items
    }
  })()

We wrapped it using IIFE, but still this code is executed one by one

So what can we do to avoid that.

We have solutions:

we could fix it using something like

In this case, the user and items returns a promise so could await for the promise to fulfil when returning the value

const user = userPromise(id);
const items = itemsPromise();
return {
  user: await whenUser,
  items: await whenItems,
};

But I prefer using Promise.all it's a lot cleaner

const [user, items] = await Promise.all([getUser(id), getItems()]);
return { user, items };

simple, elegant 😄 and up to twice as fast because the Promise.all execute all of them concurrently.

You can learn more about Promise.all on MDN

Note: Worth noting that Promise.all will return either when all promises succeed or the first one rejects, whereas Promise.allSettled will wait until every promise has either resolved or rejected

DEV Community: Judicaël Andriamahandry

Avoid async/await hell