Promise reject does not propagate the error correctly in JavaScript
Last Updated :
29 Jul, 2022
In this article, we will try to understand why Promise’s reject() method doesn’t propagate the error correctly, and later we will see the solution for the same along with certain theoretical explanations and coding examples.
Let us first have a look into the following section quickly which enlightens us on the syntax of how a promise will be created.
Syntax: Following syntax, we may use in order to create a new promise which will either resolve or reject as per the need:
let promise_variable_name = new Promise ((resolve, reject) => {
// Do something...
// Either resolve it with certain parameters
// inside resolve() method or either reject it
// with reject statement in reject() method
});
Now we will have a look over the following shown syntax of then() as well as the catch() method which we will use to execute/catch an error received from the previously created promise:
promise_variable_name.then((result) => {
// Do something with result parameter's value
})
// Further catch statement has to be added
// in case of any error caught
.catch((error) => {
// Do something with this error variable
})
Now that we have seen all the syntaxes and analyzed them carefully let’s see a quick example that will help us to understand all in a very better and more efficient manner.
Example: In this example, we will create a promise using the above-shown syntax and execute them in order to display the result correctly over the console.
Javascript
<script>
let promise = new Promise((resolve, reject) => {
resolve("This article is available on "
+ "the GeeksforGeeks platform...");
});
promise
.then((result) => console.log(result))
.catch((error) => console.log(error));
</script>
|
Output:
This article is available on the GeeksforGeeks platform...
Now that we have seen the promise’s execution using the above example. Let’s have a look over the following examples in which we will try to analyze our problem statement as well as its solution.
Example 1:
- In this example, we will create a function that will accept a number (either positive or negative), and then we will create a promise through the above-shown syntax.
- Then inside that promise, we will apply a condition (with the help of an if-statement) which will check the number’s value as per the requirement.
- Then if that number matches the requirement, we will apply the reject() method that will contain a certain statement in itself. Afterward, we have added a line that is not required as an output on the console side but still, we have added it in order to see if and not our code works fine or not.
- Then at last we will call our method using both the then() method (for printing result) and catch() method (in order to catch the error caught, if so).
Javascript
<script>
let checkNumValue = (num) => {
return new Promise((resolve, reject) => {
if (num === 0) {
console.log("Zero number received...!!");
reject("Stop code's execution since "
+ "invalid number caught...");
}
console.log("This line is of no use, hence "
+ "not required in output...!!!");
});
};
checkNumValue(0)
.then((result) => console.log(result))
.catch((error) => console.log("Caught Error: " + error));
</script>
|
Output:
Zero number received...!!
This line is of no use, hence not required in output...!!!
Caught Error: Stop code's execution since invalid number caught...
Now as we have seen that one unwanted line gets printed in the browser’s console which was not required here and the reason for the same is that when the reject() method is called, it will do the work and make the control flow goes on and it would stop it’s execution until something explicitly passed in after reject() method execution statement.
Example 2:
- In this example, we will take into consideration the previous example’s code and further, we will add certain changes in the function itself to make it executable as per the need.
- In this method after the reject() function call, we will add an empty return statement which will make the execution end or completed over that point itself and will not move further.
- With this return statement that one extra line gets omitted and will not be displayed over the browser’s console as an output.
Javascript
<script>
let checkNumValue = (num) => {
return new Promise((resolve, reject) => {
if (num === 0) {
console.log("Zero number received...!!");
reject("Stop code's execution since "
+ "invalid number caught...");
return;
}
console.log("This line is of no use, hence "
+ "not required in output...!!!");
});
};
checkNumValue(0)
.then((result) => console.log(result))
.catch((error) => console.log("Caught Error: " + error));
</script>
|
Output:
Zero number received...!!
Caught Error: Stop code's execution since invalid number caught...
Similar Reads
How to create a global Promise Rejection Handler in JavaScript ?
In this article, we will try to understand firstly how we create a Rejected Promise, and later we will see how we may create a Global Promise Rejection Handler which will try to handle (somehow) that Rejected Promise created earlier in JavaScript. Let us first try to understand how we create a Promi
2 min read
JavaScript Promise constructor Property
JavaScript Promise constructor property is used to return the Promise constructor function for the object. The function which is returned by this property is just a reference to this function, not a Promise containing the function's name. The JavaScript number constructor, string constructor, and bo
1 min read
How to access the Value of a Promise in JavaScript
In this article, we will see how to access the value of Promise in JavaScript. The Promise is a feature of ES6 introduced in 2015. The concept of Promises is generally used when we want to work asynchronously. The value of a Promise can be accessed in JavaScript using the following methods. Table of
2 min read
How does Promise.any() method differs from Promise.race() method in JavaScript ?
In this article, we will first try to understand how we may declare or use Promise.any() and Promise.race() methods followed by some facts which will eventually help us to understand how they differ from each other (through theoretical as well as coding examples). Let us first quickly understand in
5 min read
Throwing an Error "cannot read property style of null" in JavaScript
In this article, we will see how we may receive an error "cannot read property style of null" in JavaScript, along with understanding the cause to get this error with the help of an example, and thereafter we will try to understand how we may correct it with certain small changes in the code snippet
3 min read
How to run a given array of promises in series in JavaScript ?
Given an array of Promises, we have to run that in a series. To do this task, we can use then(), to run the next promise, after the completion of a promise. Approach: The then() method returns a Promise, which helps us to chain promises/methods. The Promise.resolve() method executes the first callba
3 min read
Why Promise.all doesn't reject when a non-promise throws an error ?
In this article, we will talk about why Promise.all() method does not get rejected when one of the non-input promises throws an error, and in which cases the Promise.all() does get rejected. Promise.all() is a method that returns a promise. It takes an array of promises as its argument and returns a
3 min read
How to call promise inside another promise in JavaScript ?
In JavaScript, to call promise inside another promise we first declare a promise using its basic syntax and further execute this promise then create another which is to be called inside the previous promise for its execution. Promise is basically a JavaScript object which is responsible for handling
3 min read
Reject Vs Throw Promises in JavaScript
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 sim
5 min read
JavaScript Error name Property
In JavaScript, the Error name property is used to set or return the name of an error. Syntax: errorObj.name Property values: This property contains six different values as described below: SyntaxError: It represents a syntax error.RangeError: It represents an error in the range.ReferenceError: It re
2 min read