The Smallest Possible Mistake to make when using Promises

Dalmo Mendonça — Tue, 22 Oct 2019 06:57:43 +0000

Let's say you have a Promise, you do some stuff with it then just log back when all processing is finished:

const promise = new Promise((res,rej) => setTimeout(res('Resolved'), 2000))

promise
  .then(result => console.log(result))
  .then(console.log('Success!'))
  .catch(console.log('Error!'))

What's wrong with that code? Well, here's the log:

// Success!
// Error!
// Resolved

That is nothing like expected. What happened?

In fact, both then and catch expect functions as arguments. Those console.log()s are just statements, not functions, thus they're immediately evaluated.

The simplest solution is to turn those statements into anonymous functions:

promise
  .then(result => console.log(result))
  .then(() => console.log('Success!'))
  .catch((err) => console.log('Error!'))

// Resolved
// Success!

Keep in mind this is not a quirk of Promises per se, but the language in general. Other functions that take callbacks are also prone to the same mistake:

setTimeout(console.log('Timed out'), 10000)
// 'Timed out' is printed immediately
// Some environments would throw TypeError [ERR_INVALID_CALLBACK]: Callback must be a function

setTimeout(() => console.log('Timed out'), 10000)
// 'Timed out' is printed after 10 seconds

As someone who's learning JS when Promises are the norm, it seems I've sort of skipped this basic lesson on callbacks.

DEV Community: Dalmo Mendonça

The Smallest Possible Mistake to make when using Promises