Course Overview

Overview of history of the JavaScript language

History of JavaScript

Overview of the relationship between JavaScript and Java

JavaScript vs Java

Overview of how JavaScript is evolved as a programming language

How is it evolved?

Overview of how we can track upcoming features in the JavaScript language

How to track upcoming features?

Overview of how the ECMAScript is versioned

How is ECMAScript versioned?

Explanation of whether JavaScript is interpreted or a compiled language

Is it interpreted or compiled?

Explanation of how JavaScript is executed

How is it executed?

Execution Context

Explanation of what is a callstack and how it is used in JavaScript

Callstack

Overview of memory management in JavaScript

Memory

What is JavaScript

What is hoisting?

Explanation of common misconception about hoisting in JavaScript

Misconception about hoisting

Hoisting

What is scope?

Explanation of global scope in JavaScript

Global scope

Explanation of function scope in JavaScript

Function scope

Block scope

Explanation of module scope in JavaScript

Module scope

Scope chain

Scope

What is coercion?

Diving into inner details of  coercion in JavaScript

Deeper look at coercion

Explanation of what abstract operations are and common types of abstract operations in JavaScript

Abstract operations

Explanation of how abstract or loose equality works in JavaScript

Abstract equality operator

Explanation of how the addition operator works in JavaScript

Addition operator

Explanation of how relational operators work in JavaScript

Relational operators

Coercion exercise for testing and practicing the knowledge learned in this module

Coercion exercise

Coercion

What is a closure?

Explanation of a common misconception about closures in JavaScript

Misconception about closures

Explanation of the problem of closures inside loops and how to fix it

Closures inside loops

Explanation of closures can be used to hide data

Data hiding using closures

Closures

What is prototypal inheritance?

Prototype chain

__proto__ property

Explanation of how we can create objects with custom prototypes in JavaScript

Custom prototypes

Explanation of how prototype chain is set with ES6 classes

ES6 classes and prototypes

Prototypes

Explanation of this keyword in JavaScript

What is this?

Explanation of how "this" works inside arrow functions

Arrow functions and "this"

Explanation of how value of "this" can be set explicitly

Explicitly binding "this"

globalThis

Summarizing "this"

'this' keyword

What is a symbol?

Explanation of why symbols were added in JavaScript

Why symbols?

Symbols and privacy

Explanation of global symbols in JavaScript

Global symbols

Explanation of what well-known symbols are in JavaScript

Well-known symbols

Symbol

Overview of asynchronous behavior of JavaScript

Overview

Overview of how callbacks help us write asynchronous code in JavaScript

Callbacks

Event loop

Promise

Explanation of promise chaining in JavaScript

Promise chaining

Explanation of some static methods of promises and their use cases

Use cases for static Promise methods

Explanation of async-await syntax in JavaScript

async await

Explanation of microtasks, how they are processed, and how they are linked to promises

Microtasks

Explanation of common anti-patterns to avoid when using promises in JavaScript

Promise anti-patterns

Asynchronous JavaScript

Explanation of what is an iterator in JavaScript

Iterators

Explanation of what is a generator in JavaScript

Generators

Explanation of how we can create asynchronous iterators in JavaScript

Asynchronous iterators

Explanation of how we can create asynchronous generators in JavaScript

Asynchronous generators

Iterators and Generators

Overview of what is debugging and different ways to debug JavaScript

Debugging

Overview of using the "debugger" statement to debug JavaScript

Debugger statement

Overview of using the breakpoints in browser developers' tools to debug JavaScript

Breakpoints in browser

Overview of using the VS Code debugger to debug JavaScript

VS Code debugger

Debugging JavaScript

Final thoughts and advice regarding how to continue the exciting journey of learning JavaScript

Conclusion

Wrap up

Enter your name and email address below, then click the **"Send my free chapter"** button to get started

300+ page PDF

EPub

newline Access with Replits

All Code Samples

Discord Community Access

One-time price of $69

Become a confident JavaScript pro by unraveling the most challenging aspects of the language. With easy-to-understand explanations and code examples, you’ll gain a deeper and solid understanding of JavaScript's most complex features.

Advanced JavaScript Unleashed is for beginner and intermediate developers alike, who want to elevate their JavaScript skills and become senior engineers by gaining a deeper understanding of the core topics of the language.

Advanced JavaScript Unleashed

In the previous lesson, we discussed the following instance methods of promises:

We discussed what each of these methods allows us to do, but what we didn't discuss is what each of these methods returns. Their return value is important because it allows for promise chaining, which is the topic of this lesson.

Each of the instance methods of promises returns a new promise, which enables us to create a chain of method calls, effectively creating a chain of asynchronous operations. Promise chaining helps resolve the two main problems we face when using callbacks: "Callback Hell" and error handling.

The following code example shows how we have registered fulfillment and rejection handlers with the promise returned by the 

const p = fetch(/* some url */);

// register a fulfillment handler
p.then((response) => {
  // code...
});

// register a rejection handler
p.catch((error) => {
  // code...
});

As each promise instance method returns a new promise, we can rewrite the above code as shown below:

fetch(/* some url */)
  .then((response) => {
    // code...
  })
  .catch((error) => {
    // code...
  });

The refactored code achieves the same result as the first code example, but technically, the first code example is different compared to the refactored code. In the first code example, the rejection handler is registered on the promise returned by the 

 function, whereas in the refactored code, the rejection handler is registered on the promise returned by the 

 method. The promise chain in the refactored code can be split into different parts, as shown below to make it easier to understand:

const pFetch = fetch(/* some url */);

const pThen = pFetch.then((response) => {
  // code...
});

const pCatch = pThen.catch((error) => {
  // code...
});

Notice the promises for which fulfillment and rejection handlers have been registered. The fulfillment handler is registered on the promise returned by the 

 function, but unlike the first code example, the rejection handler is registered on the promise returned by the 

 method. So does it mean that if the promise returned by the 

 function is rejected, there is no rejection handler registered to handle the rejection? No, the rejection handler registered on the 

 promise will handle the rejection. To understand how it works, we have to understand how the promise chain works.

Further code examples in this lesson will use the following function that simulates an HTTP request that takes approximately two seconds to complete:

This above function will make it easy for us to understand the promise chaining. The function takes a boolean parameter that specifies whether we want our fake request to be fulfilled or rejected. The default value of the parameter is 

, so we only need to pass the argument if we want the request to fail. Inside the function, a promise is returned that wraps around the 

 to simulate a request that takes approximately two seconds to complete. After the timer expires, the promise is fulfilled or rejected, depending on the value of the 

 function defined, let us dive into the world of promise chaining.

 method on a promise registers a fulfillment handler on that promise. The 

 method itself returns a new promise that is different from the original promise on which the 

const pRequest = fakeRequest();

const pThen = pRequest.then((response) => {
  console.log(response);
});

console.log(pThen === pRequest); // false

You can run the above code in the Replit below:

 method fulfills or gets rejected based on the following two questions:

Keeping the above two questions in mind, let us discuss the different scenarios that can affect the promise returned by the 

Scenario 1: Original promise gets fulfilled

 method is called is fulfilled, the promise returned by the 

 method depends on what happens inside the fulfillment handler. Following are different things a fulfillment handler can do that affect the promise returned by the 

 to the promise returned by the fulfillment handler of the 

Scenario 2: Original promise gets rejected

 method is called is rejected, the promise returned by the 

 method depends on the following scenarios:

Now that we have discussed how the promise returned by the 

 method settles in different scenarios, next we will discuss the promise returned by the 

 method is used to register a rejection handler for a promise in which it is called. Just like the 

 method also returns a new promise, and just like the 

 method promise, the promise returned by the 

 method settles depending on the following two questions:

Suppose the original promise on which the 

 method is called is fulfilled. In that case, the rejection handler registered using the 

 method isn't called, and the promise returned by the 

 method gets fulfilled with the same fulfillment value as the original promise.

// pRequest will be fulfilled
const pRequest = fakeRequest();

const pCatch = pRequest.catch((error) => {
  console.log(error.message);
});

pCatch.then((data) => {
  // logs the fulfillment value with
  // which pRequest promise fulfilled
  console.log(data);
});

---
title: Promise chaining
description: Explanation of promise chaining in JavaScript
isPublicLesson: false
useMdx: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/advanced-javascript-unleashed-app/-/tree/main/module_09/lesson_09.05
---

In the previous lesson, we discussed the following instance methods of promises:

-   `Promise.prototype.then()`
-   `Promise.prototype.catch()`
-   `Promise.prototype.finally()`

We discussed what each of these methods allows us to do, but what we didn't discuss is what each of these methods returns. Their return value is important because it allows for promise chaining, which is the topic of this lesson.

Each of the instance methods of promises returns a new promise, which enables us to create a chain of method calls, effectively creating a chain of asynchronous operations. Promise chaining helps resolve the two main problems we face when using callbacks: "Callback Hell" and error handling.

The following code example shows how we have registered fulfillment and rejection handlers with the promise returned by the `fetch` function:

```js
const p = fetch(/* some url */);

// register a fulfillment handler
p.then((response) => {
  // code...
});

// register a rejection handler
p.catch((error) => {
  // code...
});
```

As each promise instance method returns a new promise, we can rewrite the above code as shown below:

```js
fetch(/* some url */)
  .then((response) => {
    // code...
  })
  .catch((error) => {
    // code...
  });
```

The refactored code achieves the same result as the first code example, but technically, the first code example is different compared to the refactored code. In the first code example, the rejection handler is registered on the promise returned by the `fetch` function, whereas in the refactored code, the rejection handler is registered on the promise returned by the `then` method. The promise chain in the refactored code can be split into different parts, as shown below to make it easier to understand:

```js
const pFetch = fetch(/* some url */);

const pThen = pFetch.then((response) => {
  // code...
});

const pCatch = pThen.catch((error) => {
  // code...
});
```

Notice the promises for which fulfillment and rejection handlers have been registered. The fulfillment handler is registered on the promise returned by the `fetch` function, but unlike the first code example, the rejection handler is registered on the promise returned by the `then` method. So does it mean that if the promise returned by the `fetch` function is rejected, there is no rejection handler registered to handle the rejection? No, the rejection handler registered on the `pThen` promise will handle the rejection. To understand how it works, we have to understand how the promise chain works.

Further code examples in this lesson will use the following function that simulates an HTTP request that takes approximately two seconds to complete:

```js
function fakeRequest(isSuccessRequest = true) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (isSuccessRequest) {
        const data = { name: "John Doe", favouriteLanguage: "JavaScript" };
        resolve(data);
      } else {
        const error = new Error("request failed");
        reject(error);
      }
    }, 2000);
  });
}
```

This above function will make it easy for us to understand the promise chaining. The function takes a boolean parameter that specifies whether we want our fake request to be fulfilled or rejected. The default value of the parameter is `true`, so we only need to pass the argument if we want the request to fail. Inside the function, a promise is returned that wraps around the `setTimeout` to simulate a request that takes approximately two seconds to complete. After the timer expires, the promise is fulfilled or rejected, depending on the value of the `isSuccessRequest` parameter.

With the `fakeRequest` function defined, let us dive into the world of promise chaining.

## then promise

Calling the `then` method on a promise registers a fulfillment handler on that promise. The `then` method itself returns a new promise that is different from the original promise on which the `then` method is called.

```js
const pRequest = fakeRequest();

const pThen = pRequest.then((response) => {
  console.log(response);
});

console.log(pThen === pRequest); // false
```

You can run the above code in the Replit below:

<ReplitEmbed src="https://replit.com/@newlineauthors/promise-chaining-example5" />

The promise returned by the `then` method fulfills or gets rejected based on the following two questions:

-   What happens to the promise on which the `then` method is called? In our case, the `then` method is called on the `pRequest` promise.
-   What is returned from the fulfillment or rejection handlers passed to the `then` method? Which handler will affect the promise returned by the `then` method depends on which handler is invoked when the original promise on which the `then` method is called settles.

Keeping the above two questions in mind, let us discuss the different scenarios that can affect the promise returned by the `then` method:

### Scenario 1: Original promise gets fulfilled

If the original promise on which the `then` method is called is fulfilled, the promise returned by the `then` method depends on what happens inside the fulfillment handler. Following are different things a fulfillment handler can do that affect the promise returned by the `then` method:

-   If the fulfillment handler is registered and it returns a value that is not a promise or a thenable, then the promise returned by the `then` method gets fulfilled with that returned value.

    ```js
    // pRequest will be fulfilled
    const pRequest = fakeRequest();

    const pThen = pRequest.then((response) => {
      console.log(response);
      return "success";
    });

    pThen.then((data) => {
      console.log(data); // success
    });
    ```

You can run the above code in the Replit below:

<ReplitEmbed src="https://replit.com/@newlineauthors/promise-chaining-example6" />

-   If the fulfillment handler doesn't explicitly return any value, the promise returned by the `then` method is fulfilled with `undefined` as the fulfillment value.

    ```js
    // pRequest will be fulfilled
    const pRequest = fakeRequest();

    const pThen = pRequest.then((response) => {
      console.log(response);
    });

    pThen.then((data) => {
      console.log(data); // undefined
    });
    ```

You can run the above code in the Replit below:

<ReplitEmbed src="https://replit.com/@newlineauthors/promise-chaining-example7" />

-   If the `then` method is called on a promise but the fulfillment handler isn't provided, the promise returned by the `then` method gets fulfilled with the same fulfillment value as the original promise.

    ```js
    // pRequest will be fulfilled
    const pRequest = fakeRequest();

    // fulfillment handler not provided
    const pThen = pRequest.then();

    pThen.then((data) => {
      // logs the value with which pRequest fulfilled
      console.log(data);
    });
    ```

You can run the above code in the Replit below:

<ReplitEmbed src="https://replit.com/@newlineauthors/promise-chaining-example8" />

-   If the fulfillment handler throws any value or an error, the promise returned by the `then` method gets rejected with the thrown value as the rejection reason or value.

    ```js
    // pRequest will be fulfilled
    const pRequest = fakeRequest();

    const pThen = pRequest.then((response) => {
      throw new Error("something bad happened");
    });

    pThen.catch((error) => {
      console.log(error.message); // something bad happened
    });
    ```

You can run the above code in the Replit below:

<ReplitEmbed src="https://replit.com/@newlineauthors/promise-chaining-example9" />

-   If the fulfillment handler returns a promise, the promise returned by the `then` method gets _resolved_ to the promise returned by the fulfillment handler. One promise getting _resolved to another promise_ simply means that the fate of one promise (let's call it `p1`) depends on the other promise (let's call it `p2`). If `p2` is fulfilled, `p1` also gets fulfilled with the same fulfillment value. If `p2` gets rejected, `p1` also gets rejected with the same rejection value. Promise `p1` will wait for `p2` to settle before it also settles and will eventually meet the same fate as `p2`.

    ```js
    // pRequest will be fulfilled
    const pRequest = fakeRequest();

    const pThen = pRequest.then((response) => {
      // return a promise that will be fulfilled
      return fakeRequest();
    });

    pThen.then((response) => {
      // logs the fulfillment value of
      // promise returned from the fulfillment
      // handler of pRequest promise
      console.log(response);
    });
    ```

You can run the above code in the Replit below:

<ReplitEmbed src="https://replit.com/@newlineauthors/promise-chaining-example10" />

  In the above code example, `pThen` promise returned by the `then` method gets _resolved_ to the promise returned by the fulfillment handler of the `pRequest` promise.

### Scenario 2: Original promise gets rejected

If the original promise on which the `then` method is called is rejected, the promise returned by the `then` method depends on the following scenarios:

-   If only the fulfillment handler is passed to the `then` method, the promise returned by the `then` method also gets rejected with the same rejection reason or value with which the original promise was rejected.

    ```js
    // pRequest will get rejected
    const pRequest = fakeRequest(false);

    const pThen = pRequest.then((response) => {
      console.log(response);
    });

    pThen.catch((error) => {
      console.log(error.message); // request failed
    });
    ```

You can run the above code in the Replit below:

<ReplitEmbed src="https://replit.com/@newlineauthors/promise-chaining-example11" />

-   If a rejection handler is passed to the `then` method, then the promise returned by the `then` method depends on what happens inside the rejection handler. This works similarly to how it works in the case of the fulfillment handler:

    -   If the rejection handler returns a non-promise value, the promise returned by the `then` method gets fulfilled with the value returned by the rejection handler.
    -   If the rejection handler doesn't explicitly return any value, the promise returned by the `then` method is fulfilled with `undefined` as the fulfillment value.
    -   If the `then` method is called on the original promise but the rejection handler isn't provided, the promise returned by the `then` method gets rejected with the same rejection value as the original promise.
    -   If the rejection handler throws any value or an error, the promise returned by the `then` method gets rejected with the thrown value as the rejection reason or value.
    -   If the rejection handler returns a promise, the promise returned by the `then` method gets resolved to the promise returned by the rejection handler, the same as in the case of the fulfillment handler discussed earlier.

Now that we have discussed how the promise returned by the `then` method settles in different scenarios, next we will discuss the promise returned by the `catch` method.

## catch promise

The `catch` method is used to register a rejection handler for a promise in which it is called. Just like the `then` method, the `catch` method also returns a new promise, and just like the `then` method promise, the promise returned by the `catch` method settles depending on the following two questions:

-   What happens to the promise on which the `catch` method is called?
-   What is returned from the rejection handler passed to the `catch` method?

### Scenario 1: Original promise gets fulfilled

Suppose the original promise on which the `catch` method is called is fulfilled. In that case, the rejection handler registered using the `catch` method isn't called, and the promise returned by the `catch` method gets fulfilled with the same fulfillment value as the original promise.

```js
// pRequest will be fulfilled
const pRequest = fakeRequest();

const pCatch = pRequest.catch((error) => {
  console.log(error.message);
});

pCatch.then((data) => {
  // logs the fulfillment value with
  // which pRequest promise fulfilled
  console.log(data);
});
```

You can run the above code in the Replit below:

<ReplitEmbed src="https://replit.com/@newlineauthors/promise-chaining-example12" />

### Scenario 2: Original promise gets rejected

The rejection handler registered using the `catch` handler is called when the original promise on which the `catch` method is called gets rejected. If the original promise is rejected, then the promise returned by the `catch` method, just like the promise returned by the `then` method, depends on what happens inside the rejection handler:

-   If the rejection handler returns a non-promise value, the promise returned by the `catch` method gets fulfilled with the value returned by the rejection handler.

    ```js
    // pRequest will get rejected
    const pRequest = fakeRequest(false);

    const pCatch = pRequest.catch((error) => {
      return "default value";
    });

    pCatch.then((data) => {
      console.log(data); // default value
    });
    ```

You can run the above code in the Replit below:

<ReplitEmbed src="https://replit.com/@newlineauthors/promise-chaining-example13" />

-   If the rejection handler doesn't explicitly return any value, the promise returned by the `catch` method is fulfilled with `undefined` as the fulfillment value.

    ```js
    // pRequest will get rejected
    const pRequest = fakeRequest(false);

    const pCatch = pRequest.catch((error) => {
      console.log(error.message); // request failed
    });

    pCatch.then((data) => {
      console.log(data); // undefined
    });
    ```

You can run the above code in the Replit below:

<ReplitEmbed src="https://replit.com/@newlineauthors/promise-chaining-example14" />

-   If the `catch` method is called on the original promise but the rejection handler isn't provided, the promise returned by the `catch` method gets rejected with the same rejection value as the original promise.

    ```js
    // pRequest will get rejected
    const pRequest = fakeRequest(false);

    // rejection handler not registered
    const pCatch = pRequest.catch();

    pCatch.catch((error) => {
      // logs the rejection value of the
      // original pRequest promise
      console.log(error.message); // request failed
    });
    ```

    You can run the above code in the Replit below:

<ReplitEmbed src="https://replit.com/@newlineauthors/promise-chaining-example15" />

-   If the rejection handler throws any value or an error, the promise returned by the `catch` method gets rejected with the thrown value as the rejection reason or value.

    ```js
    // pRequest will get rejected
    const pRequest = fakeRequest(false);

    const pCatch = pRequest.catch((error) => {
      throw error;
    });

    pCatch.catch((error) => {
      console.log(error.message); // request failed
    });
    ```