Key Concepts

Review core concepts you need to learn to master this subject

States of a JavaScript Promise

The .catch() method for handling rejection

JavaScript Promise.all()

Executor function of JavaScript Promise object

.then() method of a JavaScript Promise object

setTimeout()

Avoiding nested Promise and .then()

Creating a Javascript Promise object

See more

States of a JavaScript Promise

const promise = new Promise((resolve, reject) => {
  const res = true;
  // An asynchronous operation.
  if (res) {
    resolve('Resolved!');
  }
  else {
    reject(Error('Error'));
  }
});

promise.then((res) => console.log(res), (err) => alert(err));

A JavaScript Promise object can be in one of three states: pending, resolved, or rejected.

While the value is not yet available, the Promise stays in the pending state. Afterwards, it transitions to one of the two states: resolved or rejected.

A resolved promise stands for a successful completion. Due to errors, the promise may go in the rejected state.

In the given code block, if the Promise is on resolved state, the first parameter holding a callback function of the then() method will print the resolved value. Otherwise, an alert will be shown.

JavaScript Promises
Lesson 1 of 2
  1. 1
    Introduction
    In web development, asynchronous programming is notorious for being a challenging topic. An asynchronous operation is one that allows the computer to “move on” to other tasks while waiting for …
    Start
  2. 2
    What is a Promise?
    Promises are objects that represent the eventual outcome of an asynchronous operation. A Promise object can be in one of three states: * Pending: The initial state— the operation has not …
    Start
  3. 3
    Constructing a Promise Object
    Let’s construct a promise! To create a new Promise object, we use the new keyword and the Promise constructor method: const executorFunction = (resolve, reject) => { }; const myFirstPromise = new P…
    Start
  4. 4
    The Node setTimeout() Function
    Knowing how to construct a promise is useful, but most of the time, knowing how to consume, or use, promises will be key. Rather than constructing promises, you’ll be handling Promise objects ret…
    Start
  5. 5
    Consuming Promises
    The initial state of an asynchronous promise is pending, but we have a guarantee that it will settle. How do we tell the computer what should happen then? Promise objects come with an aptly named ….
    Start
  6. 6
    Success and Failure Callback Functions
    To handle a “successful” promise, or a promise that resolved, we invoke .then() on the promise, passing in a success handler callback function: const prom = new Promise((resolve, reject) => { re…
    Start
  7. 7
    Using catch() with Promises
    One way to write cleaner code is to follow a principle called separation of concerns. Separation of concerns means organizing code into distinct sections each handling a specific task. It enables…
    Start
  8. 8
    Chaining Multiple Promises
    One common pattern we’ll see with asynchronous programming is multiple operations which depend on each other to execute or that must be executed in a certain order. We might make one request to a d…
    Start
  9. 9
    Avoiding Common Mistakes
    Promise composition allows for much more readable code than the nested callback syntax that preceded it. However, it can still be easy to make mistakes. In this exercise, we’ll go over two common m…
    Start
  10. 10
    Using Promise.all()
    When done correctly, promise composition is a great way to handle situations where asynchronous operations depend on each other or execution order matters. What if we’re dealing with multiple promi…
    Start
  11. 11
    Review
    Awesome job! Promises are a difficult concept even for experienced developers, so pat yourself on the back. You’ve learned a ton about asynchronous JavaScript and promises. Let’s review: + Promises…
    Start

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo