Promise .then() Function in JavaScript
Overview
The promises in javascript are used for asynchronous computation such as an API call. The promise can be assumed as the placeholder for a value that hasn't been computed yet but there is a surety of the value and to get the value from the promise, we need to use either the callback functions(which are difficult the write and understand) or the then() method in javascript.
Syntax of Promise .then() in JavaScript
Parameters of Promise .then() in JavaScript
The .then() in javascript takes two parameters, the callback function for the success and the callback function for failure cases of the Promise. The parameters are optional for this function. As the promise always starts from the pending state, depending on the behavior of the promise the two functions can be called:
- onFulfilled: The function that is called upon to the success of the promise.
- onRejected: This is a function that is called upon the rejection of the promise.
Return Value of Promise .then() in JavaScript
The .then() function in javascript first checks if the promise that was made was successful or rejected and then returns the result. If the promise is fulfilled then the corresponding handler function (onFulfilled) will be invoked, else if the promise is rejected, the corresponding handler function (onRejected) will be invoked.
Example
In the example above, we have defined a function named "fun" and if that function is called, it will output "Function called!!", just after that, we created a promise resolve function that returns the string "Scaler" if the promise is fulfilled. Now, after this by using the then() function we are checking the promise and if the result is "resolve", then the success message is printed, and if the result of the promise has been rejected, then the second callback function in then() would have been invoked.
OUTPUT
What is Promise then() Function in JavaScript?
Promise in javascript is like a promise in real life, and also it can have two results, either the promise will be fulfilled or the promise will be broken. So, if the promise will be fulfilled, then the resolve() function will be called and if the promise will not be fulfilled then the reject function will be called. (There are the parameter functions that the promise takes). Or, we can also use the then function in javascript to reduce our effort and increase the simplicity.
More Examples
Here we will see how the .then() function in JavaScript behaves when a different number of parameters are passed.
Passing no parameters
As in the above example, we are not passing any parameter with the then(). So, the function fun() will only be invoked and the output of the function invoke will be printed only.
OUTPUT
Passing only the first callback function as a parameter
In the example code above, we are passing one argument to be executed if the promise will be resolved. And as the promise is resolved, so the output will be-
OUTPUT
Passing both Arguments
In the example above we have used the reject condition only as we have discussed resolve in other examples above, So here we have called then() with both the parameters and for resolve we don't have any condition. And as the promise rejects, the output will be-
OUTPUT
Supported Browsers
Browser | Version |
---|---|
Google Chorme | 6.0 and above |
Internet Explorer | 9.0 and above |
Opera | 11.1 and above |
Safari | 5.0 and above |
Mozilla Firefox | 4.0 and above |
Conclusion
- The promise in javascript is the same as the promise in real life.
- The promises in javascript are used for asynchronous computation
- Promise can be assumed as the conditional stoppage for a value that hasn't been computed yet.
- The .then() in javascript takes two parameters, the callback function for the success and the callback function for failure cases of the Promise.
- .Then() in JavaScript returns the callback function based on whether the Promise is fulfilled or rejected