> Articles > Promises in JavaScript

Promises in JavaScript

Promises in JavaScript allows execution of a block of code asynchronously and handle the result when it is ready or handle error for failure. Let's learn what are Promises in JavaScript.

What are Promises in JavaScript?

Promises in JavaScript allows us to execute a block of code asynchronously and handle the result when it is ready or handle error if code fails. A Promise acts as a proxy or placeholder for a value which is available now, later or never. Promise takes handlers as parameters which are called based on the asynchronous code's success or failure status.

Syntax for Creating a Promise

A Promise object is created using new keyword and passing an executor function which contains the asynchronous code to be executed. The function takes two handlers, resolve and reject, as arguments which are called by the asynchronous code when it completes successfully or fails due to an error. A Promise can be in one of the three states-

Pending state - This is the initial state, indicating that the asynchronous action is not yet complete.
Fulfilled state - The asynchronous code completed successfully
Rejected state - The asynchronous code failed.

Because the promise is executed asynchronously we do not know when the success or error will be reported. To get the result we need to use the Promise.then() function. then() takes two function callbacks, one for success and one for failure. The success callback is called when the promise is fulfilled and the failure callback is called when the promise is rejected. The data passed to resolve or reject are passed to these callbacks.

Let's see the implementation of Promises in JavaScript.

Implementation

promises.htm

Promises in JavaScript is natively supported by Mozilla Firefox and Google Chrome. For Internet Explorer 11 we need to use a polyfill which provides promise support in browser, that is why in the head there is 'script' tag to include promise-7.0.4.min.js.

The page displays a number and provides two buttons to select if the number is even or odd. When a button is clicked userChoice() function is called with the string 'even' or 'odd'. In userChoice we are creating a Promise object. The asynchronous code in the promise computes whether the number displayed is even or odd. If the user has made the right selection then the promise is fulfilled otherwise the promise is rejected. After creating the promise the number displayed is changed through generateRandomNumber(). In promise.then() the success callback gets the "Right Answer." message which is displayed in a pop-up. Similarly the error callback gets a "Wrong Answer." message and displays it in a pop-up. Since the promise is asynchronous, the new number is already displayed on the page even before the pop-up is closed.

Suresh Kumar Srivastava is founder of online learning site coursegalaxy.com and author of popular books C In Depth, Data Structures Through C In Depth. He has 18+ years experience in industry and worked on architecture and design of multiple products. This article Promises in JavaScript is from his Advanced JavaScript course.