JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

ES2015 brought a native Promise to the JavaScript standard library. In this course, we’re going to take an in-depth look at how to use promises to model various kinds of asynchronous operations.

First, we’re going to explore how to create promises using the Promise constructor or the Promise.resolve() or Promise.reject() methods. Then, we’re going to see how to chain promises together using .then(), .catch(), and .finally(). We’re going to compare various error handling strategies along the way. We’re going to wrap up this course by taking a look at how to deal with multiple promises using Promise.all() and Promise.race() and how to await a promise using the await operator.

Aleksander Ageev

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

Introduction to JavaScript Promises in Depth

This lesson introduces the native JavaScript [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) object and the [`Promise.prototype.then()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then) method. We’re gonna look at how to make an HTTP request using the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/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*.

Create a Promise Chain in JavaScript with Promise.prototype.then()

The [`Promise.prototype.then()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/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()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch) method: `.catch(onRejected)` behaves the same as `.then(undefined, onRejected)`.

Catch Errors in a JavaScript Promise Chain with Promise.prototype.catch()

The [`Promise.prototype.finally()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/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.

Execute Cleanup Logic in a JavaScript Promise Chain with Promise.prototype.finally()

You can use the [`Promise.reject()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/reject) method to create a promise that is rejected with the given reason.

Create a Rejected Promise in JavaScript with Promise.reject()

The [`Promise.resolve()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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](https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md) for a more detailed explanation.

Create a Resolved Promise in JavaScript with Promise.resolve()

The [`Promise` constructor](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) 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:

```js
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.

Create a New Promise in JavaScript with the Promise Constructor

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()`](https://nodejs.org/api/fs.html#fs_fs_readfile_path_options_callback) function. It also explains how to use the [`util.promisify()`](https://nodejs.org/api/util.html#util_util_promisify_original) method that is built into the Node.js standard library.

Convert a Callback-Based JavaScript Function to a Promise-Based One

The [`Promise.race()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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.

Wait for the Fastest JavaScript Promise to Settle with Promise.race()

The [`Promise.all()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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.

Wait for Multiple JavaScript Promises to Be Fulfilled with Promise.all()

The `Promise.allSettled()` method accepts an array (or any other iterable) of promises as a parameter. It returns a `Promise` object that is fulfilled with an array of settlement objects. Each settlement object describes the settlement of the corresponding input promise.

Notice that the `Promise` object returned from the `Promise.allSettled()` method is only rejected if there's an error iterating over the input promises. In all other cases, it is fulfilled.

The `Promise.allSettled()` method is useful when you want to wait for multiple promises to settle, no matter whether they'll be fulfilled or rejected.

Wait for Multiple JavaScript Promises to Settle with Promise.allSettled()

The `Promise.any()` method accepts an array (or any other iterable) of promises as a parameter. It returns a `Promise` object that is fulfilled with the value of the first input promise to fulfill:

- As soon as any input promise is fulfilled, the returned `Promise` object is fulfilled with that value.
- If all input promises are rejected, the returned `Promise` object is rejected with an `AggregateError` which has an `errors` property containing an array of all rejection reasons.

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

**Please note** that at the moment, the Promise.any() method is only implemented in Firefox Nightly. Make sure to use a polyfill in your application to make it work across browsers. 

Wait for the Fastest JavaScript Promise to Be Fulfilled with Promise.any()

The [`await` operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await) 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](https://egghead.io/courses/asynchronous-javascript-with-async-await) course.

JavaScript Promises in Depth

Marius Schulz

Credits

Course Content

You might also like these resources:

Introduction to Cloudflare Workers

Create an eCommerce Store with Next.js and Stripe Checkout

Practical Git for Everyday Professional Use