Understanding JavaScript Promises: Simplifying Asynchronous Code

In the world of JavaScript, dealing with asynchronous operations like fetching data, handling user input, or working with APIs can get tricky. Promises come to the rescue in these situations, providing a way to handle these operations in a cleaner, more manageable manner.

What Are Promises?

Think of promises as a way to handle tasks that take time to complete, like loading data from a server or waiting for a response from an API. A promise represents the eventual completion (or failure) of an asynchronous operation and its resulting value. This concept can be better understood with a real-life analogy.

Real-Life Analogy: The Singer and the Fans

Imagine you’re a popular singer, and your fans keep asking when your new song will be released. To manage the crowd, you promise to send the song to everyone once it’s published. To ensure that everyone gets it, you create a “subscription list” where fans can add their email addresses. Whenever the song is available, you’ll send it to them — and even if something goes wrong, like a fire in the studio, they will still get notified.

In this analogy:

• The producing code (like the singer) is the task that takes time to complete (e.g., loading data).
• The consuming code (the fans) is the part that needs the result of the producing code when it’s ready.
• The promise acts as the subscription list, linking the producing code to the consuming code.

Syntax of a Promise

The basic syntax for creating a promise is:

let promise = new Promise(function(resolve, reject) {
  // executor function - the producing code
});

In this code:

• resolve is a function that you call when the task is successfully completed.
• reject is a function you call if something goes wrong.

Here’s an example where a promise resolves after 1 second:

let promise = new Promise(function(resolve, reject) {
  setTimeout(() => resolve("done!"), 1000); // Job done after 1 second
});

States of a Promise

A promise goes through several states:

• Pending: The initial state, before the operation finishes.
• Fulfilled: The operation has completed successfully, and the result is available.
• Rejected: An error occurred during the operation.

Once a promise is either fulfilled or rejected, it is considered “settled.”

Handling Promise Results: .then(), .catch(), and .finally()

Promises allow you to handle the result of an operation using .then(), .catch(), and .finally() methods.

.then()

The .then() method is used to specify what happens when the promise is fulfilled or rejected:

promise.then(
  result => { /* handle success */ },
  error => { /* handle error */ }
);

If you only care about a successful result, you can pass only one argument:

promise.then(result => alert(result)); // shows "done!" after 1 second

.catch()

If you’re interested only in errors, use .catch() to handle rejection:

promise.catch(error => alert(error)); // shows error if rejected

.finally()

The .finally() method runs a cleanup function once the promise is settled, regardless of whether it was fulfilled or rejected:

promise.finally(() => {
  console.log("Cleanup done!");
});

Example: Using Promises for Script Loading

Let’s look at a practical example of using promises to load a script dynamically:

function loadScript(src) {
  return new Promise(function(resolve, reject) {
    let script = document.createElement('script');
    script.src = src;

    script.onload = () => resolve(script);
    script.onerror = () => reject(new Error(`Script load error for ${src}`));

    document.head.append(script);
  });
}

// Usage
loadScript("https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js")
  .then(script => alert(`${script.src} is loaded!`))
  .catch(error => alert(`Error: ${error.message}`));

Here, the loadScript function returns a promise. When the script is successfully loaded, the promise is resolved, and you can handle the result using .then(). If an error occurs, .catch() handles it.

Promises vs. Callbacks

Promises provide better control flow than traditional callbacks. With callbacks, you have to pass functions ahead of time, whereas promises allow you to attach handlers later using .then() or .catch().

Practical Tasks for Learning Promises

Let’s dive into some tasks to practice what we’ve learned.

1. Re-resolve a Promise

What happens when we try to resolve a promise multiple times?

let promise = new Promise(function(resolve, reject) {
  resolve(1);
  setTimeout(() => resolve(2), 1000);
});

promise.then(alert); // Output: 1

The output is 1 because the second call to resolve() is ignored. A promise can only be resolved or rejected once.

2. Delay with a Promise

Create a function delay(ms) that returns a promise. This promise should resolve after ms milliseconds.

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

delay(3000).then(() => alert('Runs after 3 seconds'));

3. Animated Circle with Promise

To animate something like a circle, use a promise to control when the animation ends, and then perform the next operation.

Conclusion

JavaScript promises make it easier to work with asynchronous code. They allow you to handle the results of asynchronous operations in a more readable and maintainable way, avoiding the callback hell that often comes with traditional callback functions. Understanding promises is a critical skill for any JavaScript developer, especially when working with modern web applications.