JavaScript ES6 Promises

Update: async/await is now the preferred way to handle promises in modern JavaScript, offering syntax that improves readability and reduces boilerplate. Check out our async/await example to see it in action.

---

A Promise provides a structured way to manage asynchronous operations in JavaScript. This tutorial dives into asynchronous programming fundamentals and demonstrates how the Promise constructor simplifies the process. We'll also explore promise creation, chaining, and the methods that come with them.

Key Takeaways

• Promises in JavaScript manage asynchronous operations efficiently and provide cleaner syntax for handling multiple outcomes.
• Understanding the different states of promises (fulfilled, rejected, pending) is crucial for effective error handling.
• Promise methods like then() and catch() facilitate method chaining, a powerful technique for managing asynchronous flows.

What is asynchronous programming?

Asynchronous programming allows processes to run separately from the main execution thread, notifying the main thread upon completion. Here's a practical example:

Imagine a web app fetching a list of items when a button is clicked. If the HTTP GET request is synchronous, users must wait for the response before continuing. An asynchronous request, meanwhile, lets users remain active in the app while data loads. This minimizes disruptions and enhances performance, particularly for operations involving network communication.

How does a Promise work?

A Promise object signifies the eventual result of an asynchronous task. It transitions through three states: pending, fulfilled (resolved), or rejected. The Promise() constructor accepts two arguments: resolve and reject, determining the fulfillment status based on the operation's outcome.

Creating a Promise

Create a promise using the Promise constructor:

const myPromise = (amount) => {
  return new Promise((resolve, reject) => {
    if (amount > 0) {
      resolve('success!');
    } else {
      reject('failure!');
    }
  });
};

myPromise(1)
// resolves Promise { 'success!' }

Here, myPromise() takes amount as a parameter, returning a Promise. When calling myPromise(1), it resolves with "success!" if the condition is met. This execution strategy avoids unnecessary immediate evaluations.

Promise Methods

Various methods handle promise fulfillment and rejection in JavaScript:

then()

The then() method executes callbacks after a promise fulfills or rejects, expecting arguments for each scenario.

const handleSuccess = (x) => {
  console.log(x + " it worked!");
};

const handleError = (x) => {
  console.log(x + " oh no, it failed!");
};

const myPromise = (amount) => {
  return new Promise((resolve, reject) => {
    if (amount > 0) {
      resolve('success!');
    } else {
      reject('failure!');
    }
  });
};

myPromise(1).then(handleSuccess, handleError);

// logs 'success! it worked!'

myPromise(0).then(handleSuccess, handleError);

// logs 'failure! oh no, it failed!'

Notice how then() allows us to process asynchronous operations cleanly, offering distinct actions for success and error cases.

catch()

The catch() method handles promise rejections and errors, consolidating error handling into a single, easy-to-maintain step.

myPromise(0).then(res => {
  console.log(res + " success!");
}).catch(err => {
  console.log(err + " oh no, it failed!");
});

// logs 'failure! oh no, it failed!'

catch() captures not only promise rejections but also internal errors, broadening error management scope.

Promise.resolve()

Creates a resolved promise with a specified value:

Promise.resolve('Success');

// returns Promise {'Success'}

Promise.reject()

Creates a rejected promise with a specified value:

Promise.reject('error');

// returns unhandled promise rejection

Promise.all()

The all() method requires all promises in an array to fulfill or reject:

const p1 = new Promise((resolve) => {
  setTimeout(resolve('p1 success'), 2000);
});

const p2 = new Promise((resolve) => {
  setTimeout(resolve('p2 success'), 4000);
});

Promise.all([p1, p2]).then((res) => {
  console.log(res);
});

// logs ['p1 success', 'p2 success'] after 4 seconds

Promise.race()

The race() method resolves based on the first promise to settle:

const p1 = new Promise((resolve) => {
  setTimeout(resolve('p1 success'), 2000);
});

const p2 = new Promise((resolve) => {
  setTimeout(resolve('p2 success'), 4000);
});

Promise.race([p1, p2]).then((res) => {
  console.log(res);
});

// logs 'p1 success' since p1 finishes first

Since p1 resolves first, race() picks it as the winner.

ES6 Promise Chaining

Promise chaining lets you sequence asynchronous operations effectively. By returning promises, you extend the process flow:

This technique harnesses the power of asynchronous programming, letting you manage sequences and errors seamlessly.

Conclusion

Promises simplify asynchronous operations in JavaScript. While you may not often create promises from scratch, grasping them lays a solid foundation for mastering async/await and advanced asynchronous flows in modern JavaScript.

FAQ

Why use promises over callbacks?

Promises mitigate "callback hell" and provide a cleaner, more manageable way to handle asynchronous operations, especially when dealing with multiple asynchronous calls.

What's the difference between a promise and async/await?

Async/await is syntactic sugar built on top of promises that makes code easier to read and work with by using a more synchronous style.

Can promises replace all asynchronous operations?

While promises offer robust handling for many async situations, certain lower-level asynchronous APIs or real-time scenarios might still require callbacks or other strategies.