What is JavaScript Promise – Explained with examples?

The JavaScript Promise is a JavaScript object used for asynchronous operations. It represents the result of an asynchronous operation that is either resolved or rejected. It runs parallel with other operations without blocking the rest of the flow.

It has pending, fulfilled, and rejected states. 

• Pending is an undefined state. It’s not clear yet that promise resolves or rejects
• Fulfilled is a resolved state. An operation is completed without any errors
• Rejected is a state where an operation failed

It’s important to understand the following reasons for using a Promise with examples. Do not worry about how the code works now as we get to it later after understanding the purpose of Promise.

1- Run an operation asynchronous/ parallel without blocking the main thread

What does it mean? Let’s test the following example:

The For-Loop operation runs until it variable i matches 9999999 and then prints “Hello JavaScript!”. You can see that the For-Loop operation blocks the rest of the flow until it completes but what if we don’t want the flow to be blocked and get the result when it’s matched. The following is an example of using a Promise to avoid blocking the flow.

The operation first prints “Hello JavaScript!” and then prints the matched number 9999999.

2- Promise chaining

Promise helps us to write clean code by chaining more than one Promise to execute asynchronous operations in sequence. It is one of the biggest advantages of using a Promise.

The callback passes to the then() method executes once the promise is resolved which is in 2 seconds, and the callback has the result of the promise.

How does it work? Promise Syntax

The Promise constructor takes two options parameters, resolve() and reject() which are the callbacks. These callbacks are run when the executor gets a result that could be a success or failure.

• resolve(value): If the operation finishes successfully and returns a value
• reject(error): If the operation fails and returns an error

The promise completes in 3 seconds and passes the value to the callback (resolve).

A Promise has three functions, .then, .catch and .finally. A Promise executes the operation when .then function is called on the Promise.

.then: Mozilla Developer defines then “The then() method returns a Promise. It takes up to two arguments: callback functions for the success and failure cases of the Promise.”

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

 See the example above for the successful run of a Promise.

.catch: It runs when a Promise fails. The first parameter contains the error returned from the callback (reject()).

Here is an example of reject() or a Promise fails:

.finally: It runs once despite Promises successes or fails. It is a good place to clean up or stop loading indicators.