Understanding Promises in Javascript

Understanding Promises in Javascript

Learn how to start with promises and make our code cleaner.

undraw_Programming_re_kg9v.png

Javascript is a single-threaded programming language which means two bits of scripts can’t run at the same time, they have to run one after one. JavaScript is threaded in browsers with a lot of other stuff that varies from browser to browser.

In simple words, we can think that javascript is like a queue the one that comes first will be executed first. JavaScript code is executed line by line.

Before ES6, we all use the callbacks functions to handle asynchronous tasks such as network requests, updating data to the database.

But after the ES6 we have promises which help us to easily handle asynchronous tasks and make our life easier and code simpler.

What is a Promise?

A Promise is an object which holds the eventual completion or failure of an asynchronous operation and its resulting value.

This allows asynchronous methods to return values in the same way that synchronous methods do: instead of returning the final value right away, the asynchronous method returns a promise to supply the value at a later time.

States of Promises

Promise in Javascript is as somewhere similar to the promises in the real world,

Let’s Understand Promise:

If we promise someone in the real world, then there might be 3 possibilities:

  1. We fulfill the promise.
  2. We failed to fulfill our promise.
  3. We just rejected the promise.

Similarly in JavaScript Promise has 3 States

Drawing-1.sketchpad.png

  1. Pending: It means promise is in its initial state, it is neither fulfilled nor rejected.
  2. Fulfilled: it means that the operation is completed successfully.
  3. Rejected: It means that the operation has failed.

Let's get back to the practical side of Promises now that we know what a Promise is and how to use it.

Creating a Promise

Most of the time, you'll be consuming promises rather than making them, but knowing how to make them is still important.

Syntax:

carbon.png

We create a promise using the Promise constructor which takes an argument which is the callback function also known as the executor function which takes two arguments to resolve and reject.

The executor function is immediately called when we create a promise.

resolve() is called when the promise is resolved and reject() is called when the promise is rejected.

carbon (1).png

A string, number, boolean, array, or object can be passed to resolve() and reject() as an argument.

The promise will be in the pending state when it is created, and its value will be undefined.

Note- A promise can only be resolved or rejected once. Invoking resolve() or reject() again has no effect on the Promise state.

Consuming a promise

We can consume promises using the then() and catch() methods.

Example:

carbon (3).png

then() method is called when the promise is resolved. then() method takes one argument which is a callback function that runs when the promise is completed successfully.

catch() method is called when the promise is rejected. This method has also one argument which is a callback function that runs when the promise is rejected.

Conclusion

We've discussed promises and how to use them in JavaScript. There are two parts to a promise. 1) Creating a Promise and 2) Consuming a Promise. Most of the time, you'll be consuming promises rather than making them, but knowing how to make them is still important.

That's all there is to it; I hope you found this article useful! Please feel free to ask any questions, make suggestions, or simply chat in the comments section below. Cheers!✌️