JavaScript Promises in Depth

I'm proud to present JavaScript Promises in Depth, my fourth egghead.io course!

#Lesson #1: Introduction to JavaScript Promises in Depth

Here's an overview of all the topics we're going to cover. Enjoy the course!

Watch Lesson #1

#Lesson #2: Create a Promise Chain in JavaScript with Promise.prototype.then()

This lesson introduces the native JavaScript Promise object and the Promise.prototype.then() method. We're gonna look at how to make an HTTP request using the Fetch API and how to asynchronously process the response in a promise chain.

In addition, we'll discuss the three mutually exclusive states a promise can be in: pending, fulfilled, or rejected.

Watch Lesson #2

#Lesson #3: Catch Errors in a JavaScript Promise Chain with Promise.prototype.catch()

The Promise.prototype.then() method accepts two callbacks as parameters, onFulfilled and onRejected:

• If the promise is fulfilled, onFulfilled will be called.
• If the promise is rejected, onRejected will be called.
• If the promise never settles (that is, stays pending forever), neither one will be called.

If you want to register a handler for rejected promises only, you can use the Promise.prototype.catch() method: .catch(onRejected) behaves the same as .then(undefined, onRejected).

Watch Lesson #3

#Lesson #4: Execute Cleanup Logic in a JavaScript Promise Chain with Promise.prototype.finally()

The Promise.prototype.finally() method lets you attach a callback to a JavaScript promise that is executed once that promise is settled, whether fulfilled or rejected. It is typically used to perform cleanup logic (such as hiding loading spinners, freeing used resources, …). By using finally(), you don't have to duplicate that cleanup logic in both the promise's fulfillment and rejection handlers.

Watch Lesson #4

#Lesson #5: Create a Rejected Promise in JavaScript with Promise.reject()

You can use the Promise.reject() method to create a promise that is rejected with the given reason.

Watch Lesson #5

#Lesson #6: Create a Resolved Promise in JavaScript with Promise.resolve()

The Promise.resolve() method returns a Promise object that is resolved with the given value. It can be used to convert “promise-like” objects to native Promise objects: If you pass a thenable (an object with a then() method) to Promise.resolve(), the returned Promise object will eventually adopt the same state.

Note that Promise.resolve() doesn't necessarily return a fulfilled promise. If it receives a thenable that ends up being rejected, the returned Promise object will be rejected as well. Check out States and Fates for a more detailed explanation.

Watch Lesson #6

#Lesson #7: Create a New Promise in JavaScript with the Promise Constructor

The Promise constructor is used to create a new Promise object. It receives a single function as a parameter (known as the executor function), which in turn receives the resolve and reject functions as parameters:

const promise = new Promise((resolve, reject) => {
  // Perform some operation, then call either resolve() or reject()
});

Within the body of the executor function, you can perform any operation — typically, an asynchronous one. You then either call resolve(value) or reject(reason), depending on the outcome of that operation, to fulfill or reject the promise.

Note that the Promise object is rejected if an error is thrown within the body of the executor function. The return value of the executor function is ignored.

Watch Lesson #7

#Lesson #8: Convert a Callback-Based JavaScript Function to a Promise-Based One

Sometimes, you might want to convert a JavaScript function that accepts a callback to one that returns a Promise object. This lesson shows how to manually wrap a promise-based API around the fs.readFile() function. It also explains how to use the util.promisify() method that is built into the Node.js standard library.

Watch Lesson #8

#Lesson #9: Wait for the Fastest JavaScript Promise to Settle with Promise.race()

The Promise.race() method accepts an array (or any other iterable) of promises as a parameter. It returns a Promise object that is fulfilled or rejected once the first input promise is fulfilled or rejected:

• As soon as any input promise is fulfilled, the returned Promise object is fulfilled with that value.
• As soon as any input promise is rejected, the returned Promise object is rejected with that reason.

Promise.race() can be used to race multiple promises against each other and find the first promise to settle.

Watch Lesson #9

#Lesson #10: Wait for Multiple JavaScript Promises to Settle with Promise.all()

The Promise.all() method accepts an array (or any other iterable) of promises as a parameter. It returns a Promise object that is fulfilled if all of the input promises are fulfilled or rejected if any of the input promises is rejected:

• If all input promises are fulfilled, the returned Promise object is fulfilled with an array of fulfillment values of all promises (in the same order as the promises passed to Promise.all()).
• If any input promise is rejected, the returned Promise object is rejected with that reason.

Watch Lesson #10

#Lesson #11: Await a JavaScript Promise in an async Function with the await Operator

The await operator is used to wait for a promise to settle. It pauses the execution of an async function until the promise is either fulfilled or rejected.

To learn more about async and await, check out my Asynchronous JavaScript with async/await course.

Watch Lesson #11