Key Concepts

Review core concepts you need to learn to master this subject

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 example 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
    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 …
  2. 2
    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 …
  3. 3
    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…
  4. 4
    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…
  5. 5
    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 ….
  6. 6
    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…
  7. 7
    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…
  8. 8
    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…
  9. 9
    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…
  10. 10
    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…
  11. 11
    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…

How you'll master it

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

Pro Logo