Promises
Learn how to write asynchronous JavaScript with the Promises Syntax.
StartKey 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
States of a JavaScript Promise
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.
- 1In 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 …
- 2Promises 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 …
- 3Let’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…
- 4Knowing 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…
- 5The 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 ….
- 6To 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…
- 7One 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…
- 8One 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…
- 9Promise 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…
- 10When 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…
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory