Promises: The Promises That Aren't Always Kept (A Love Story with Heartbreak)

Hello friends! Today, we're going to talk about an exciting and somewhat complex topic in JavaScript: Promises. They're kind of like the promises we hear in real life – sometimes they're kept, and sometimes... well, not! Are you ready to laugh a little and learn a lot?

Why Were Promises Even Created? (The Rantings of a Tired Programmer)

Before Promises entered the world of JavaScript, we had a hell called Callback Hell. Imagine you have a bunch of tasks that need to be done one after the other. Each of these tasks has a Callback function that calls the next function after it's finished. The result is a giant pyramid of Callbacks where you can easily get lost!

        
          javascript
          
        
      // Example of Callback Hell (Terrifying, isn't it?)
asyncTask1(function(result1) {
  asyncTask2(result1, function(result2) {
    asyncTask3(result2, function(result3) {
      // ... and so on!
    });
  });
});

This code is not only hard to read, but managing errors is also a pain. Imagine something happens in the middle of this pyramid and an error occurs. You have to write a lot of code to manage that error. In short, Callback Hell was a nightmare!

Promises Became Our Savior! (A Hero Arrives)

Promises came to sort out this situation. A Promise is kind of like a "promise" to do something in the future. This promise can have three states:

Pending: Meaning the task hasn't started yet.
Resolved: Meaning the task has been completed successfully and the result is ready.
Rejected: Meaning something went wrong and the task couldn't be completed.

With Promises, we no longer have to worry about Callback Hell. We can write our code much more neatly and readably.

Creating a Promise (Let's Make a Real Promise)

Creating a Promise is very easy. Just use the keyword new Promise() and give it a function. This function has two arguments: resolve and reject.

        
          javascript
          
        
      const myPromise = new Promise((resolve, reject) => {
  // Do a time-consuming task
  setTimeout(() => {
    const randomNumber = Math.random();
    if (randomNumber > 0.5) {
      resolve("Promise fulfilled! Number was greater than 0.5.");
    } else {
      reject("Promise rejected! Number was less than 0.5.");
    }
  }, 2000); // Wait two seconds
});

In this example, we created a Promise that generates a random number after two seconds. If the number is greater than 0.5, the Promise is fulfilled using resolve() and returns a message. If it's less, it's rejected using reject() and returns an error message.

Using Promises (Now Let's See Where This Promise Leads)

To use a Promise, we use the then() and catch() methods. then() is executed when the Promise is successfully fulfilled, and catch() is executed when the Promise is rejected.

        
          javascript
          
        
      myPromise
  .then((result) => {
    console.log("Result:", result); // Promise fulfilled!
  })
  .catch((error) => {
    console.error("Error:", error); // Promise rejected!
  });

This code is much more readable, and it's easier to manage errors.

Async/Await: Another Way to Work with Promises (When You're Not in the Mood!)

There's another way to work with Promises called Async/Await. This method makes the code much simpler and similar to Synchronous code.

To use Async/Await, you must define a function with the keyword async. Then, you can use the keyword await inside that function to wait for a Promise to be fulfilled.

        
          javascript
          
        
      async function myFunction() {
  try {
    const result = await myPromise;
    console.log("Result:", result);
  } catch (error) {
    console.error("Error:", error);
  }
}

myFunction();

The code above does exactly the same as the previous code, but it's much simpler and more readable. await causes the function execution to pause until myPromise is fulfilled. If the Promise is successfully fulfilled, the result is stored in the result variable. If the Promise is rejected, an error is thrown that we can manage using try...catch.

Why Do Promises Sometimes Let You Down? (Heartbreak in the World of Code)

Although Promises are very good and useful, they sometimes may not work as we expect. For example, a Promise may never be fulfilled or rejected. This usually happens when there is a problem in the code or an external service is not working properly.

To prevent this from happening, it's best to always set a Timeout for your Promises. That is, if a Promise is not fulfilled after a certain period, reject it and show an error message.

Conclusion (A Happy Ending)

Promises are a powerful tool in JavaScript that help us better manage Async code and escape from Callback Hell. Using Promises and Async/Await, we can write more readable, neater, and maintainable code.

I hope this article has been helpful to you. If you have any questions, be sure to ask. Until the next article, goodbye!

Alyvro

Alyvro

Alyvro

Alyvro