The Promise Methods Handbook

In JavaScript, Promises are the foundation of modern asynchronous programming. To truly master them, you have to know their three states, two outcomes, and six methods.

Think of it like: My parents made a promise: "Get 80% or Above in your matric exams, and we’ll buy you a bike."

So, i am super excited & the wait begins by discussing with my friends "what bike is good etc etc then, You enter class 10. You study Hard. You sit for the final exam. Then, you wait for the results.

It is a long, heavy period of waiting.

Finally, the results come out. You pass! You go to them then—reality hits. There is still no guarantee. Maybe they buy it, or maybe they don't.

If they don't, it looks like this: .catch((e) => console.log(e.message))

Output: "Not right now, son. We spent the money on a laptop for your brother so take after sometimes and that sometimes never comes eventually it becomes rejected." .

Or Maybe they will give you bike, "Thank god". the promise is Resolved.

That is exactly how a Promise in JS works.

It promises to return something—either a Resolve or a Reject—after finishing a task if neither then pending.

Promises are mostly used when you don’t know when an external call will finish.

Since JS is single-threaded so, if you execute a js file with an external DB call, your whole process stay in a "loading" state while you waiting for DB response & You don't know the exact time the DB will respond—it depends!

A Promise says: "I don't have the answer yet, but I promise I'll tell you the moment I do—whether it’s good news or bad."

What are The Three States?

A Promise is always in one of these three stages:

• Pending: You're still waiting or default state.

• Fulfilled (Resolved): This is moment, when promises being is actually keep & Done.

• Rejected: This is where, some promises being made gone broke, evently becomes rejected.

The six methods are:

1. Promise.all([...]) : All your friends plan a trip and everyone promises to go. But in the end, if even one or some friend cancels, the whole trip is cancelled for everyone. (FOR DEV DUDES: It waits for all to succeed. If even one fails, the whole thing fails & as you can see it is array).

2. Promise.allSettled([...]): is like a trip planner who waits for every friend to respond. Whether they say "Yes" or "No," the planner waits for everyone's answer before giving you the final result. (FOR DEV DUDES: It waits for all promises to finish, whether they succeeded or failed. Once everyone is done, it responds with everything at once, not one by one).

3. Promise.race([...]): You texting three different girls you like, but only one of them reply to you while others not so, you decide to talk more only with her. FOR DEV DUDES: It takes an array of promises, but once the fastest one is finished, it returns only that result and ignores all the others.

4. Promise.any([...]) : is like a texting three different girls to ask for a date. You don't care who replies first if they say 'No.' You keep waiting until someone finally says 'Yes!' Once you get that first 'Yes,' you stop waiting for the others. (FOR DEV DUDES: It takes an array of promises. Even if the fastest result is a rejection, you don't care. You only care about the first one to resolve. Once a single resolve is found, it returns that result and ignores the others, whether they failed, finished later, or are still executing).

5. Promise.resolve(value) : That one friend who is always ready. You don't have to wait for them to get dressed or check their schedule; as soon as you call, they are already standing at the door with a "Yes." (FOR DEV DUDES: A quick way to create a promise that is already successful).

6. Promise.reject(reason) : It’s like asking your wife for permission to go on a boys' trip. The moment she hears the words 'boys' trip,' she has already said 'No' before you can even finish explaining why you should go. The rejection is so instant that you don't even get to finish your sentence and she doesn't care about the explanation, 'No' means 'No' that it. (FOR DEV DUDE: A quick way to create a promise that is already failed).

Should i provide example code? for each methods, for now click here.

The Methods You’ll Use Daily:

1. .then() : Runs when the promise is fulfilled.

2. .catch() : Runs when the promise is rejected (error handling).

3. .finally() : Runs no matter what happens (useful for hiding loading spinners).

Let see a litle bit modern async/ await too:

While .then() is great, most developers now use async and await. It makes asynchronous code look like regular, top-to-bottom code.

example:

async function getChaiRecipe() {
  console.log("☕ Starting to brew..."); // Show a loading state
  try {
    const response = await fetch('https://api.chaicode.com/chai/recipe');

    if (!response.ok) {
      throw new Error("Could not find the recipe!"); 
    }

    const data = await response.json(); 
    console.log("Success! Here is your recipe:", data);

  } catch (error) {
    console.error("Error:", error.message);

  } finally {
    console.log("Kitchen cleaned. Brewing process finished."); 
  }
}

Pro-Tip: Avoid the "Callback Hell": happens when you nest functions inside functions, making your code crawl sideways. Promises fix this by keeping your code vertical and readable.

For you, this is simple one: If your code looks like a staircase or a pyramid, it's time to refactor!

Thank you, for time, I hope you enjoy leaning.