Broken Promises

Let’s start here: Promise.resolve( 'hi' ).then( showHappy ).catch( showError )

This is a super common form you see with Promises, but is has a subtle problem. What happens if your then callback throws?

Arg! My catch caught the error! Because of how promises chain, this is expected, but often surprising. If your catch is written to expect a certain kind of error – maybe from a network request – it too could now fail.

If you want to be sure that the rejected promise is from the original promise, you have two options: use the second parameter to then, or write the catch first.

These methods have their own issues though. If the success handler really may throw, you may need to add a second catch to the end to handle that case.

And if you put the catch first, if that handler returns a non-Error, then following then will run:

That’s rarely what you want, but can be handy for cases where you want to transform an API error into a blank result.

Next time, how this all changes with async / await.

async / await

What do think this JS code prints?


const arr = [3, 1, 2];

const wait = (ms) => new Promise(resolve => {
  setTimeout(resolve, ms);
});

arr.forEach(async item => {
  await wait(item * 100);
  console.log(item);
})

How about this?


const arr = [3, 1, 2];

const wait = (ms) => new Promise(resolve => {
  setTimeout(resolve, ms);
});

const mapped = arr.map(async item => {
  await wait(item * 100);
  return item * 2;
})

console.log(mapped);