Javascript promise throw error

Improve Article

Save Article

This article covers the use of reject and throw premises in Javascript and explains it’s differences.
reject(): It is an inbuilt function in Javascript that returns a Promise object which has been rejected for a particular given reason.
 

Syntax:  

Promise.reject(reason)

Examples: The reason can be a simple string message or you can even pass an Error object.  

• Program 1: Passing a string message as the reason.

• Output: 
   

promise failed!

• Program 2: Passing an instanceOf Error as reason.

• Output: As you can see when we are passing an Error object we get the entire Error tree. So it is upto the user which one the user prefers.

Error: promise failed!
    at :4:9
    at new Promise ()
    at :2:11
    at render (tryit.php:202)
    at tryit.php:170
    at dispatch (jquery.js:4435)
    at r.handle (jquery.js:4121)

throw: It is used in JavaScript to create and throw user defined exceptions. Using JavaScript throw statement, you can completely control program flow and generate the user define error messages. If we use throw instead of reject() in the above two examples the results will be exactly same (you can try it yourself just by replacing reject with throw).
Examples: However throw can be used in any Javascript try-catch block and not only with promises. 

• Program 1: Using throw in a promise.

• Output:

promise failed!

• Program 2: Using throw without a promise.

• Output: Now as we have understood the basic working of both reject and throw, let us talk about the differences between them:

Less than 25

Comparison between Promise- reject and throw:
1. If there is an asynchronous callback function inside the Promise then we cannot use throw from inside the callback function as it will not be recognised by catch() and we will be getting an error in the output.  

• Program 1:

• Output: As you can see the error message (“promise failed!”) has been printed in the output but it wasn’t printed by the catch() function of our promise. It becomes an uncaught exception.

/home/akarshan/Desktop/Projects/Personal/gfg/app.js:3
      throw( 'promise failed!' );
      ^
promise failed!
(Use `node --trace-uncaught ...` to show where the exception was thrown)

• Program 2: To resolve the above situation we can make use of reject() method.

• Output: Here the catch block is able to recognise reject() and print the corresponding message.

promise failed!

2. This is a very basic difference. If throw is encountered anywhere inside a function the exception is thrown immediately and the control flow is terminated.In other words after throwing the exception control comes out of the function inside which the exception was thrown.  

• Program 1:

• Output: From this example it is clear that the statement console.log(“Here”) is not getting executed. 
   

'promise failed!'

• Program 2: To resolve above situation we use reject() instead of throw the statements after the reject statement inside the function will get executed before the control goes to the catch block. 
   

• Output:

Here
promise failed!

3. The reject can only be used with a Javascript promise but throw unlike reject can be used to create and throw user-defined exceptions in any try-catch block and not only the ones with promises. If you use Promise.reject() in a try-catch block which is not associated with a promise, UnhandledPromiseRejectionWarning error will pop up.  

• Program 1:

• Output: Here, UnhandledPromiseRejectionWarning error comes as Promise.reject() cannot find a catch block associated with a Promise object.

Okay!

• Program 2: The catch block in the above code is not associated with any Promise object and so it is not executed. This is clear from the output as the message “inside catch” is not getting printed. But if we use throw this error will not occur.

• Output:

inside catch
Less than 25

Summary: in this tutorial, you will learn how to deal with error handling in promises.

Suppose that you have a function called getUserById() that returns a Promise:

function getUserById(id) {
    return new Promise((resolve, reject) => {
        resolve({
            id: id,
            username: 'admin'
        });
    });
}
Code language: JavaScript (javascript)

Normal error

First, change the getUserById() function to throw an error outside the promise:

function getUserById(id) {
    if (typeof id !== 'number' || id <= 0) {
        throw new Error('Invalid id argument');
    }

    return new Promise((resolve, reject) => {
        resolve({
            id: id,
            username: 'admin'
        });
    });
}
Code language: JavaScript (javascript)

Second, handle the promise by using both then() and catch() methods:

getUserById('a')
    .then(user => console.log(user.username))
    .catch(err => console.log(err));
Code language: JavaScript (javascript)

The code throws an error:

Uncaught Error: Invalid id argument
Code language: JavaScript (javascript)

When you raise an exception outside the promise, you must catch it with try/catch:

try {
    getUserById('a')
        .then(user => console.log(user.username))
        .catch(err => console.log(`Caught by .catch ${error}`));
} catch (error) {
    console.log(`Caught by try/catch ${error}`);
}



  


                       
  



Code language: JavaScript (javascript)

Output:

Caught by try/catch Error: Invalid id argument
Code language: JavaScript (javascript)

Errors inside the Promises

We change the getUserById() function to throw an error inside the promise:

let authorized = false;

function getUserById(id) {
    return new Promise((resolve, reject) => {
        if (!authorized) {
            throw new Error('Unauthorized access to the user data');
        }

        resolve({
            id: id,
            username: 'admin'
        });
    });
}
Code language: JavaScript (javascript)

And consume the promise:

try {
    getUserById(10)
        .then(user => console.log(user.username))
        .catch(err => console.log(`Caught by .catch ${error}`));
} catch (error) {
    console.log(`Caught by try/catch ${error}`);
}
Code language: JavaScript (javascript)

Output:

Caught by .catch Error: Unauthorized access to the user data
Code language: JavaScript (javascript)

If you throw an error inside the promise, the catch() method will catch it, not the try/catch.

If you chain promises, the catch() method will catch errors that occurred in any promise. For example:

promise1
    .then(promise2)
    .then(promise3)
    .then(promise4)
    .catch(err => console.log(err));
Code language: JavaScript (javascript)

In this example, if any error in the promise1, promise2, or promise4, the catch() method will handle it.

Calling reject() function

Throwing an error has the same effect as calling the reject() as illustrated in the following example:

let authorized = false;

function getUserById(id) {
    return new Promise((resolve, reject) => {
        if (!authorized) {
            reject('Unauthorized access to the user data');
        }

        resolve({
            id: id,
            username: 'admin'
        });
    });
}

try {
    getUserById(10)
        .then(user => console.log(user.username))
        .catch(err => console.log(`Caught by .catch ${err}`));
} catch (error) {
    console.log(`Caught by try/catch ${error}`);
}
Code language: JavaScript (javascript)

In this example, instead of throwing an error inside the promise, we called the reject() explicitly. The catch() method also handles the error in this case.

Missing the catch() method

The following example does not provide the catch() method to handle the error inside the promise. It will cause a runtime error and terminate the program:

function getUserById(id) {
    return new Promise((resolve, reject) => {
        if (!authorized) {
            reject('Unauthorized access to the user data');
        }
        resolve({
            id: id,
            username: 'admin'
        });
    });
}

try {
    getUserById(10)
        .then(user => console.log(user.username));
    // the following code will not execute
    console.log('next');

} catch (error) {
    console.log(`Caught by try/catch ${error}`);
}
Code language: JavaScript (javascript)

Output:

Uncaught (in promise) Unauthorized access to the user data

If the promise is resolved, you can omit the catch() method. In the future, a potential error may cause the program to stop unexpectedly.

Summary

• Inside the promise, the catch() method will catch the error caused by the throw statement and reject().
• If an error occurs and you don’t have the catch() method, the JavaScript engine issues a runtime error and stops the program.

Back to: JavaScript Tutorial For Beginners and Professionals

JavaScript Promise Error Handling with Examples

In this article, I am going to discuss JavaScript Promise Error Handling with Examples. Please read our previous article where we discussed JavaScript Promise.race() vs Promise.all() in detail. 

JavaScript Promise Error Handling

Promise chains are good at error handling. When a promise rejects, the control jumps to the closest rejection function. Errors thrown from promises are handled by the second parameter (reject) passed to then() or by the handler passed to catch()

.then(null, error => { /* handle error here */ });
// or
foo().catch(error => { /* handle error here */ });

Synchronously throwing an error from function that should return a promise

Imagine a function below like this:

<html>
<head>
    <title>JavaScript Promise error Handling example</title>
</head>
<body>
    <script>
        function foo(arg) {
            if (typeof arg != 'number' || arg <= 0) {
                throw new Error('Invalid arg argument')
            }
            return new Promise((resolve, reject) =>
                setTimeout(() =>
                    resolve(arg + ' ' + 'completed'), 1000)
            )
        }

        foo('fdfd')
            .then(result => console.log(result))
            .catch(err => console.log(err)) // <-- Error: Invalid argument will be caught here
    </script>
</body>
</html>

Output:

In the above example foo() function throw an error outside the promise, which gets handled by using both then() and catch() methods.

Raise an exception outside the promise

When we raise an exception outside the promise, we must catch it with try/catch.

<html>
<head>
    <title>JavaScript Promise error handling with try catch example</title>
</head>
<body>
    <script>
        function foo(arg) {
            if (typeof arg != 'number' || arg <= 0) {
                throw new Error('Invalid arg argument')
            }
            return new Promise((resolve, reject) =>
                setTimeout(() =>
                    resolve(arg + ' ' + 'completed'), 1000)
            )
        }

        try {
            foo('alphnumberic')
                .then(result => console.log(result))
                .catch(err => console.log(`Caught by .catch ${error}`));
        } catch (error) {
            console.log(`Caught by try/catch ${error}`);
        }
    </script>
</body>
</html>

Output:

Throw an error inside the Promises

Inside the promise, the catch() method will catch the error caused by the throw statement and reject(). We have modified the existing function so as to throw an error inside the promises and then consume the promise.

<html>
<head>
    <title>JavaScript throw an error inside the Promises example</title>
</head>
<body>
    <script>
        let isValid = false;
        function foo(arg) {
            return new Promise((resolve, reject) => {
                if (!isValid) {
                    throw new Error('Invalid argument is passed to function')
                }
                setTimeout(() =>
                    resolve(arg + ' ' + 'completed'), 1000)
            })
        }

        try {
            foo('alphnumberic')
                .then(result => console.log(result))
                .catch(error => console.log(`Caught by .catch ${error}`));
        } catch (error) {
            console.log(`Caught by try/catch ${error}`);
        }
    </script>
</body>
</html>

Output:

If we throw an error inside the promises the catch() method will catch the error, not by the try/catch.

Calling reject() method of Promise inside the promise

reject() method returns a promise that is rejected. It is highly used for debugging purposes and error catching. We have modified the existing function so as to throw an error by calling reject() method. As throwing an error has the same impact as calling the reject() method that has elaborated in the below example:

<html>
<head>
    <title>JavaScript throw an error by calling reject() method example</title>
</head>
<body>
    <script>
        let isValid = false;
        function foo(arg) {
            return new Promise((resolve, reject) => {
                if (!isValid) {
                    reject('Invalid argument is passed to function')
                }
                setTimeout(() =>
                    resolve(arg + ' ' + 'completed'), 1000)
            })
        }

        try {
            foo('alphnumberic')
                .then(result => console.log(result))
                .catch(error => console.log(`Caught by .catch ${error}`));
        } catch (error) {
            console.log(`Caught by try/catch ${error}`);
        }
    </script>
</body>
</html>

Output:

In the above example rather than throwing an error inside the promise, we have called the reject() method of promise explicitly. In this case catch() method also handles the error as it handles in throwing an error inside the promises.

Unhandled rejected by missing the catch() method

An error will be silently ignored if a promise doesn’t have a catch() block or reject() handler. If any error occurs and we don’t have the catch() method, the JavaScript engine issues a runtime error and stops the execution of the program.

<html>
<head>
    <title>JavaScript missing the catch()method example</title>
</head>
<body>
    <script>
        let isValid = false;
        function foo(arg) {
            return new Promise((resolve, reject) => {
                if (!isValid) {
                    reject('Invalid argument is passed to function')
                }
                setTimeout(() =>
                    resolve(arg + ' ' + 'completed'), 1000)
            })
        }

        try {
            foo('alphnumberic')
                .then(result => console.log(result))//this will not execute
                //.catch(error => console.log(`Caught by .catch ${error}`));
        } catch (error) {
            console.log(`Caught by try/catch ${error}`);
        }
    </script>
</body>
</html>

Output:

Chaining a Promise

If we have a promise chain then an error occurred in any promises, the catch() method will catch it.

<html>
<head>
    <title>JavaScript error handing chaining a promise example</title>
</head>
<body>
    <script>
        function foo(arg) {
            return new Promise((resolve, reject) => {
                if (typeof arg === 'undefined') {
                    throw new Error('Invalid argument is passed to function')
                }
                setTimeout(() =>
                    resolve(arg + ' ' + 'completed'), 1000)
            })
        }

        foo('dsds') //promise1
            .then(result => foo())  //promise2
            .then(result => foo('dsds')) //promise3
            .then(result => foo('dsds')) //promise4
            .catch(error => console.log(`Caught by .catch ${error}`));
    </script>
</body>
</html>

Output:

In the above example if any error occurred in Promise1, promise2, promise3, or promise4 then it will catch by catch() method.

In the next article, I am going to discuss JavaScript Async Await with Examples. Here, in this article, I try to explain the JavaScript Promise Error Handling with Examples. I hope this JavaScript Promise Error Handling with Examples article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this JavaScript Promise Error Handling.