DEV Community

How to Escape Callback Hell with JavaScipt Promises

AmberJ on October 21, 2019

What's callback hell and what the hell are Promises?? To dive into those questions requires some basic understanding of the Javascript callstack, ...

Read full post

Kedar • Oct 21 '19 • Edited

Nice article.
Another clean "solution" I'd like to add is to use async/await:

const summerActivities = async () => {
  try {
    const result = await fightTheDemogorgon();
    const seasonsLeft = await rollForDamage(result);
    const finalResult = await closeTheGateIn(seasonsLeft);
    console.log('Hawkins is safe for ' + finalResult + ' more seasons.'));
  } catch (e) {
    failureCallback();
  }
}

Sebastian Vargr • Feb 7 '20

This ^

And' it supported by major browser now. :D
caniuse.com/#feat=async-functions

The poly-fills for async/await can cost a lot of kb depending on how it's transpiled and chunked.

So keep that in mind if speed and legacy is a factor.

AmberJ • Oct 21 '19

Thanks for the addition! 😎

Heiker • Oct 21 '19 • Edited

When there is no way to avoid callback style functions, named functions can help ease the pain.

function fight(result) {
  rollForDamage(result, keepFighting, failureCallback);
}

function keepFighting(seasonsLeft) {
  closeTheGate(seasonsLeft, finishHim, failureCallback);
}

function finishHim(result) {
  console.log('Hawkins is safe for ' + result + ' more seasons.');
}

fightTheDemogorgon(fight);

Also, if you are using node you can use the promisify utility to convert those to promise based functions.

AmberJ • Oct 21 '19

Definitely! Love some bluebird and util. Thanks for commenting Heiker!

molamk • Oct 21 '19 • Edited

Great article! We can condense that even further (no need to write the arguments here)

fightTheDemogorgon()
.then((result) => rollForDamage(result))

Becomes

fightTheDemogorgon()
.then(rollForDamage)

Chaining, aka the Power of Friendship

That's just genius 😂

Simme • Jan 15 '20

One thing worth noting regarding the shortform though, is that

fightTheDemogorgon()
  .then(rollForDamage)

actually becomes something along the lines of

fightTheDemogorgon()
   .then(function(result) {
   });

rather than

fightTheDemogorgon()
   .then((result) => ...);

which might come with unintended side effects to function scoping and what this actually points to.

AmberJ • Oct 21 '19

Nice catch!

Paul Isaris • Oct 21 '19

Awesome post, Amber! Loved the parallelism with Stranger Things... :D

AmberJ • Oct 21 '19

Thanks Paul!

Atul • Oct 22 '19

Promises are outdated now, should check with async/await :)

AmberJ • Oct 22 '19

you should write a post about it then

Atul • Oct 22 '19

I would but that too is an old story.