JavaScript Promise: The Complete Guide

JavaScript is the single-threaded scripting language. Everything happens in a sequence; it is written, line-by-line. But, the asynchronous operations occur in the order they complete. 

Events are perfect for things that can happen multiple times on the same object as keyup, touchstart, mouseover, etc.

With those events, you don’t care about what happened before you attached a listener. But when it comes to the async behavior of success/failure, Callback functions are not as helpful as promises.

Javascript Promise

Javascript Promise is a special JavaScript object that links the “producing code” and the “consuming code” together. The promise can only succeed or fail once. It cannot succeed or fail twice or more, and neither can it switch from success to failure or vice versa.

If the promise has succeeded or failed and you later add the success/failure callback, the correct callback will be called based on the output, even though the event occurred earlier.

The promise constructor takes in one argument: a callback function with two parameters called to resolve and reject. Thus, we can use promise as the two different approaches.

  1. Creating a Promise
  2. Consuming a Promise

Creating a Promise

Let us take an example of how we can create a javascript promise.

// server.js

const prom = new Promise(function(resolve, reject) {
  setTimeout(() => {
    resolve('Promise is created and consumed');
  }, 200);

So, here, we have created one javascript promise object and passed the two parameters to the Promise constructor called to resolve and reject.

At the time of consuming, if the promise is resolved, then we can consume the value using the then() function; if the promise is rejected, then we get the error values inside the catch() block.

Consuming a Promise

So, if we resolve the function, we get the value inside then() block. Let us take the following example and see the output inside the terminal.

// server.js

const prom = new Promise(function(resolve, reject) {
  setTimeout(() => {
    resolve('Promise is created and consumed');
  }, 200);

prom.then(value => {

Now, run the above file in node.js by typing the following command.

Javascript Promise Example Tutorial

The promise is also rejected, and in that scenario, our code looks like the below snippet.

// server.js

const prom = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('Promise is rejected');
  }, 200);

prom.catch(error => {


Javascript Promise reject

So understanding promises are not that difficult if an excellent example is provided.

The executor initiates some asynchronous work typically, and then, once that completes, either call the resolve function to resolve a promise or rejects it if an error occurs.

The promise is rejected if the error is thrown in the executor function. The return value of the executor is ignored.

Promises States In Javascript

The Promise is the proxy for the value not necessarily known when a promise is created. Thus, the promise allows you to associate the handlers with an asynchronous action’s eventual success or failure.

This lets asynchronous methods return the values like synchronous methods. Instead of immediately returning a final value, an asynchronous method returns a promise to supply value at some point in the future.

The Promise is in one of these states:

  1. Pending: an initial state or pending state, neither fulfilled nor rejected.
  2. Fulfilled: meaning that the operation was completed successfully.
  3. Rejected: meaning that the operation failed.

Promise Methods

The Javascript Promise has the following methods.


It returns the promise that is either fulfilled when all of the promises in the iterable argument have been fulfilled or rejected as soon as one of the promises in the iterable argument rejects promise. If the returned promise is fulfilled, it is fulfilled with an array of the values from the fulfilled promises in the same order defined in the iterable.
If the returned promise rejects, it is rejected for the reason from the first promise in the iterable rejected.


It returns the promise that fulfills or rejects, a.s.a. one of the promises in the iterable fulfills or rejects, with a value or reason from that promise.


Returns the Promise object that is rejected for the given reason.

Promise.resolve (value)

It returns the Promise object that is resolved with the given value.

Async-Await Promise Example

Let us take an example of how we can use Promise with the async-await.

// server.js

function square(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(Math.pow(x, 2));
    }, 2000);

async function layer(x)
  const value = await square(x);

layer(10); // 100

So, in the output, you will get 100. First, it will call the async function layer, and then it will wait for the promise to be either fulfilled or rejected, then it will give us the output.

Here, we have to use the setTimeout() function to cause the manual delay of execution to simulate the AJAX request. If we reject, then get the error object.

Error handling in Promises is effortless because it gives once, whether fulfilled or rejected. So it is the best replacement for the callback functions where callback hell is created.

That’s it for this tutorial. Thanks for taking it.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.