DEV Community

Charlie @ 90-10.dev
Charlie @ 90-10.dev

Posted on • Updated on • Originally published at 90-10.dev

Promises, Promises 🤣

Initially published on 90-10.dev.

Asyncronous operations is one of the hardest topics for a beginner programmer. In this article, we're aiming to explain how to use them via JavaScript promises and make it very easy to use.

The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value. 
Enter fullscreen mode Exit fullscreen mode

MDN website

A Simple Promise

To replicate the asyncronous nature of a real scenario code, we're going to use the setTimeout function to delay the flow.

Here is out first promise:

const prom = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("The return string");
  }, 1000);
});
Enter fullscreen mode Exit fullscreen mode

Notice that the Promise constructor takes, as parameter, a function with 2 parameters of its own: resolve and reject.

The resolve string will be passed on the then method:

prom.then(text => {
  console.log(text)
});
Enter fullscreen mode Exit fullscreen mode

For the cases when a promise is rejected, a catch method is used. The third method we can use is finally which always run no matter if the promise is resolved or rejected.

Here is a full example for completeness. We're using:

  • setInterval to run the code every 2 seconds
  • Math.random() to randomly generate a random value and resolve or reject based on it
setInterval(() => {
  console.log('Start:')
  const prom = new Promise((resolve, reject) => {
    setTimeout(() => {
      let rand = Math.random();
      if( rand > 0.5) {
        resolve(`Resolved: ${rand}`);
      } else {
        reject(`Rejected: ${rand}`);
      }
    }, 1000);
  });
  prom.then(text => {
    console.log(`  - then: ${text}`);
  }).catch(reason => {
    console.log(`  - catch: ${reason}`);
  }).finally(() => {
    console.log(`  - finally`);
  });
}, 2000);
Enter fullscreen mode Exit fullscreen mode

Concurency

A very common scenario is loading multiple resources simultaneously but displaying them only once all are completed. This can be easily achieved with Promise.all.

In the example below, we have 3 promises: prom1, prom2 and prom3 that resolve at different intervals: 1500, 500 and 2000 respectively:

const prom1 = new Promise((resolve) => {
  setTimeout(() => {
    resolve("Resolved 1!");
  }, 1500);
});
const prom2 = new Promise((resolve) => {
  setTimeout(() => {
    resolve("Resolved 2!");
  }, 500);
});
const prom3 = new Promise((resolve) => {
  setTimeout(() => {
    resolve("Resolved 3!");
  }, 2500);
});
Promise.all([prom1, prom2, prom3])
  .then( ([text1, text2, text3]) => {
    console.log(`then: ${text1} | ${text2} | ${text3}`);
  });
Enter fullscreen mode Exit fullscreen mode

Notice that the then: Resolved 1! | Resolved 2! | Resolved 3! is only shown after 2.5 seconds when all promises are resolved.

Dependency

Another very common case is chaining promises - that is having 2 promises that depend on each over. Eg: retrieving a list of resources and then details of a particular resource:

function firstOperation() {
  const prom = new Promise((resolve) => {
    setTimeout(() => {
      resolve("Resolved 1!");
    }, 1500);
  });
  prom.then(text => {
    console.log(` - Resolved: ${text}`)
    secondOperation();
  });
};


function secondOperation() {
  const prom = new Promise((resolve) => {
    setTimeout(() => {
      resolve("Resolved 2!");
    }, 1500);
  });
  prom.then(text => {
    console.log(` - Resolved: ${text}`)
  });
};

firstOperation();
Enter fullscreen mode Exit fullscreen mode

What next?

There are lots of great resources available to learn from. Probably the best start is the MDN docs.

Top comments (0)