What are Promises in JavaScript? An Introductory Guide

When it comes to JavaScript, a promise that is fulfilled is said to be while that that is broken is said to be . Promises replaced callback functions that were used to handle asynchronous operations. resolved rejected Asynchronous operations required multiple callbacks and these would make code unmanageable. Luckily, JavaScript introduced promises natively in ES6 saving us the callback hell. Promises When I started working on JavaScript, some of the articles suggested that JavaScript is an asynchronous language while others stated that it was synchronous. This really frustrated me. I will just save you this frustration by telling you that “JavaScript is an asynchronous programming language”. And with callback functions, we can make it function like Asynchronous programming language. : noun: Assurance that one will do something or that a particular thing will happen. A promise A promise is an object which can be returned synchronously from an asynchronous function. It is returned in one of these possible states: Not yet fulfilled or rejected Pending: This will be called when a promise is fulfilled if Resolved: resolve() This will be called when a promise is not fulfilled for example if is called. Rejected: reject() Prototypes As we saw earlier, a promise has three methods. When a promise is created, it is in a One or more of the three methods will be run when a promise is settled based on whether a promise is or Pending state. fulfilled rejected. .prototype.catch(onRejected) .prototype.then(onFulfilled, onRejected) .prototype.finally(onFinally) Promise Promise Promise The below image shows the flow for and methods. They are chained as shown in the diagram since they return a promise. If (. ) is declared for a promise, then it will be executed whenever a promise is irrespective of whether it is fulfilled or rejected. .then .catch finally settled Flow for .then and .catch methods A practical example of how promises work The ES6 promise constructor takes a function. That function takes two parameters, and . Let’s look at this scenario to better understand promises. resolve() reject() A daughter asks her mother for money to go to a beach party with her friends. The mother tells her she does not have enough money for the trip but she was expecting Molly (One of her friends)to pay back the money she had lent her. Let’s use JavaScript to see how this promise is executed. MumsPromise = ( { MumsSavings = ; TripExpense = ; (MumsSavings > TripExpense) { resolve({ : , : }); } { reject( ); } }); MumsPromise.then( { .log( , .stringify(value)); }); MumsPromise.catch( { .log( , reason); }); MumsPromise.finally( { .log( ); }); let new Promise ( ) function resolve, reject 600 900 if Day "Saturday" Time "11:00 am- 6:30 pm" else "We do not have enough savings" ( ) function value console "Yay! The party is on, Mum already got me a ticket!" JSON ( ) function reason console "Mom coudn't buy me the ticket because " ( ) function console "I know Mum cannever fail to buy me a ticket if she has the money" The output of this code will be Case1 Let’s assume Molly had paid the 600 money that she owed to the mother, then her mother’s savings would now be 1200 money. Case2 In case1, the promise is rejected because the mother is 300 cash short while in case2, the promise is resolved and the daughter goes to the beach party. Promise Chaining Because always returns a new promise, it’s possible to chain promises with precise control over how and where errors are handled. Promises allow you to mimic normal synchronous code’s behaviour. .then() try/catch Like synchronous code, chaining will result in a sequence that runs in serial. In other words, you can do: fetch(url) .then(process) .then(save) .catch(handleErrors) ; Our JavaScript code would them become; MumsPromise = ( { MumsSavings = ; TripExpense = ; (MumsSavings > TripExpense) { resolve({ : , : }); } { reject( ); } }); MumsPromise.then( { .log( , .stringify(value)); }, { .log( , reason); } ); let new Promise ( ) function resolve, reject 600 900 if Day "Saturday" Time "11:00 am- 6:30 pm" else "We do not have enough savings" ( ) function value console "Hurray I got this phone as a gift " JSON ( ) function reason console "Mom coudn't buy me the phone because " Important things to note A pending promise may transition into a fulfilled or rejected state. A fulfilled or rejected promise once settled must not transition into any other state. A promise or “thenable” is an object that supplies a standard-compliant method. .then() Once a promise is settled, it must have a value (which can be ) and that value must not change. undefined I hope I kept my promise and you now know what promises are to begin working with them. Add your comments and let me know where I can make some improvements. Follow me on , , Twitter Facebook LinkedIn Also published on Medium's subdomain .