Sunday, May 10, 2020

JavaScript Promise

JavaScript Promise


Javascript Promise can prove extremely useful to work with asynchronous operation with better readability and error handling.

Promise


A Promise is an object representing an asynchronous task that is supposed to be completed (or failed) and the results of the task. We can associate handlers with the resultant value (success or failure) of the asynchronous operations.

A promise can eventually succeed or fail only once.

The result of a promise cannot switch from failing to success or success to failure. Basically, a promise is a returned object that can be attached to callbacks, instead of passing callbacks into a function.

A Promise can be in three possible states

  • Pending: This is the initial state, neither resolved nor rejected
  • Fulfilled: In this state, the task is completed successfully
  • Rejected: The operation failed due to some reason
javascript promise
Promise


A pending promise eventually can be either settled with a value or rejected for any reason (error). A promise is considered to be resolved or settled if it has reached either in fulfilled or rejected state.


Promise constructor


The basic syntax to use a Promise constructor is,

var promiseObj = new Promise(executor);

OR

let apromise = new Promise(function(resolveFun, rejectFun) {
  // executor code, some asynchronous operation
});

The executor function is executed by the Promise constructor to build a promise object automatically. It calls resolveFun if it was successful or it calls the rejectFun an error has occurred.

The arguments resolveFun and rejectFun are callbacks specified by JavaScript itself. Our code runs inside the executor.

When the executor obtains the result, be it soon or late, doesn’t matter, it should call one of these callbacks:

The executer eventually calls either resolveFun function or rejectFun function. The resolveFun(value) is called when the job is finished successfully, with result value. The rejectFun(error) is called if an error happens, the error object is returned. 

Chaining


The promises can be chained as Promise.prototype.then() and Promise.prototype.catch() methods return a promise, they can be further chained.


promise chaining



promise.then(), promise.catch(), and promise.finally() methods can be further used to append action with a promise that becomes settled. A new promise object is produced by these methods that can be optionally associated with chaining.

var myPromise =
   (new Promise(executor))
  .then(handleResolvedA)
  .then(handleResolvedB)
  .then(handleResovedC)
  .catch(handleIfFailed);

Methods


The following methods are available with a Promise.
  • Promise.resolve(promise) method returns a promise object only if promise.constructor==Promise.
  • Promise.resolve(thenable) generates a new promise object from thenable containing then().
  • Promise.resolve(obj) generates a promise object resolved for an object.
  • Promise.reject(obj) generates a rejection for the object.
  • Promise.all(array) generates a promise resolved when each item in an array is fulfilled or rejects when items in the array are not fulfilled. Promise.race(array) returns a promise that fulfills or rejects as soon as one of the promises in an iterable fulfills or rejects, with the value or reason from that promise.

Example


<html>  
<head>  
<h2> Promise Demo</h2>  
</br> </head>  
<body>  
<script> 
 function add(a,b)
 {
 return a+b;
 }
var promise=new Promise(function(resolve, reject){  
var num= add(4,5);  
if(num==9)  
    resolve(" successfully resolved");  
else  
    reject("rejected");  
});  
 promise.then(function(ourResolve){  
 document.write("Results are:"+ourResolve);  
 }).catch(function(ourReject){  
 document.write("Results are"+ourReject);  
 });  
</script>  
</body>  
</html>

Result



By at
Labels: