DEV Community

Rishad Omar
Rishad Omar

Posted on

Javascript - Handling reject in a Promise

To demonstrate that reject does not halt processing I wrote this trivial example.

function wait(seconds) { return new Promise((resolve, reject) => { if (seconds == null || seconds == 5) { console.log('Before reject'); reject('Please supply number not equal to 5'); console.log('After reject'); } setTimeout(() => { resolve('Done'); }, seconds * 1000); }); } 
Enter fullscreen mode Exit fullscreen mode

It's a function that returns a Promise.
If the seconds specified is 5, then the expected behavior is to reject and not wait.
Any other value, I expect it to wait the specified time.

This is how I call my function:

wait(seconds) .then(() => { console.log('Successfully completed test'); }) .catch((error) => { console.error('Error in test', error); }); 
Enter fullscreen mode Exit fullscreen mode

Here is my output when running the function:

Test 1

With a value of seconds = 7
The wait function behaves as expected. It waits 7 seconds and resolves.

Successfully completed test 
Enter fullscreen mode Exit fullscreen mode

Test 2

With a value of seconds = 5
The wait function does not behave as expected. It waited 5 seconds!

Before reject After reject Error in test Please supply number not equal to 5 
Enter fullscreen mode Exit fullscreen mode

I didn't expect the "After reject" and I didn't expect it to wait the 5 seconds.
To correct this add a return statement after the reject.

function wait(seconds) { return new Promise((resolve, reject) => { if (seconds == null || seconds == 5) { reject('Please supply number not equal to 5'); return; // Do not continue } setTimeout(() => { resolve('Done'); }, seconds * 1000); }); } 
Enter fullscreen mode Exit fullscreen mode

Now re-executing test 2 above produces:

Error in test Please supply number not equal to 5 
Enter fullscreen mode Exit fullscreen mode

And there was no wait which is the expected behavior.

Read more about Promises here: https://www.freecodecamp.org/news/javascript-es6-promises-for-beginners-resolve-reject-and-chaining-explained/

Top comments (2)

Collapse
 
rishadomar profile image
Rishad Omar

An alternative to using the return is to use an else.

function wait(seconds) { return new Promise((resolve, reject) => { if (seconds == null || seconds == 5) { reject('Please supply number not equal to 5'); } else { setTimeout(() => { resolve('Done'); }, seconds * 1000); } }); } 
Enter fullscreen mode Exit fullscreen mode
Collapse
 
barrymichaeldoyle profile image
Barry Michael Doyle • Edited

In my opinion the else approach is a bit messy vs early return. And early return is a nice way to act as a guard statement that doesn't nest the code an extra layer like the else statement does.

You could (and probably should) just return the reject statement like this:

function wait(seconds) { return new Promise((resolve, reject) => { if (seconds == null || seconds == 5) { return reject('Please supply number not equal to 5'); } setTimeout(() => { resolve('Done'); }, seconds * 1000); }); } 
Enter fullscreen mode Exit fullscreen mode