DEV Community

Abdul Haseeb
Abdul Haseeb

Posted on

JavaScript Promises Easiest Explanation Ever:

Image description

Overview

Note: Give it a full read; you might be confused at the beginning, but once you read the whole thing, your doubts will be clear.

Imagine you went to a restaurant and gave an order for food. In return, a waiter gives you a note that says, "We are preparing your order. Once it is ready, I'll let you know." Simple, right?

A promise in coding is similar; it has three states:

Pending: The operation is still ongoing.
Fulfilled: The operation is successful, and the promise is kept.
Rejected: Something went wrong, and the promise is not fulfilled.
So, how does this work in coding? Why do we need promises?

Let's say you want to fetch data from a server. If it takes time, like 10 seconds or more, your program will freeze, right? That's where promises come in. A promise in JavaScript is an object with .then() and .catch() methods. These methods allow us to handle future events, like the waiter telling you your food is ready or apologizing for a kitchen mishap.

Consider the fetchData() function as an example. If it gets back data, it uses .then() to process the data. If there's an error, it uses .catch() to handle it.

Now, you might wonder what your code does in the meantime. The data fetching process runs in the background. For example, after the promise for fetching data, you can call the function add(2, 3), and it will execute without freezing your program.

you got the overview
let's understand all aspects of it deeply...

Introduction to Promises:

A promise is an object in JavaScript that represents the eventual completion or failure of an asynchronous operation. It is a way to handle asynchronous code more elegantly, providing a cleaner and more readable structure compared to traditional callback functions.

States of a Promise:

A promise can exist in one of three states:

Pending: The initial state; the asynchronous operation is ongoing, and the promise is waiting for completion or failure.
Fulfilled: The asynchronous operation completed successfully, and the promise has a resulting value.
Rejected: An error occurred during the asynchronous operation, and the promise is not fulfilled. It contains the reason for failure.

Creating a Promise:

You create a promise using the Promise constructor, which takes a function as an argument. This function, often referred to as the "executor," takes two parameters: resolve and reject.

Image description

Using resolve and reject:

resolve(result): Call this function when the asynchronous operation is successful. It transitions the promise to the fulfilled state and passes the result to any attached .then() block.

reject(reason): Call this function if an error occurs during the asynchronous operation. It transitions the promise to the rejected state and passes the reason for failure to any attached .catch() block.

Chaining .then() and .catch():
Use the .then() method to handle the successful completion of a promise and the .catch() method to handle errors in the promise chain. You can chain multiple .then() methods to perform sequential operations.

Image description

As a beginner if you understand this much i think you can start using them don't dive too deep into the things which you don't need...leave it as a Blackbox

For example Math.random generates a random number between 0 and 1 so that is enough for you to use it...you don't need to know how things work under the hood at least as a beginner!

Good LUck and Happy Coding!

Top comments (0)