JavaScript Promise catch() Method Tutorial

In this section, we will learn what the Promise catch() method is and how to use it in JavaScript.

Note: we’re assuming you’re already familiar with the Promise in general as well as the `then` method.

What is Promise catch() Method in JavaScript? (Promise Error Handling)

The catch() method is used to define a handler for the target promise object when it settles to rejections.

Promise catch() Method Syntax:

promise.catch(handler);

Promise catch() Method Parameters

This method takes one argument and that is a function. Inside the body of this function, we define the instructions for the rejection and it will be called automatically when the target promise settles to rejection.

Notes:

  • If the target promise has a `then` method with the handler for rejection and after that we defined the `catch` method, the rejection handler in the `then` method will handle the rejection. This means the `catch` method won’t be called anymore (unless in the rejection handler of the `then` method creates another rejected promise).

Promise catch() Method return value

The return value of the catch() method is another promise. By default, this promise is resolved, but we can explicitly define a rejected promise as return that as a result.

Example: using Promise catch() method in JavaScript

function exe(resolve, reject){
  setTimeout(()=>{
    reject("Failed");
  },2000);
}

const prom = new Promise(exe);

prom.then(value=>{
  console.log("The resolved handler");
  console.log(value);
}).catch(failed=>{
  console.log("The rejection handler");
  console.log(failed);
});

Output:

The rejection handler

Failed

As you can see, the target promise settled to rejection and so the handler of the `catch` method is called afterwards.

In this example, if there was a handler for the rejection in the `then` method, the `catch` method would’ve been ignored.

Example: JavaScript Promise catch() method

function exe(resolve, reject){
  setTimeout(()=>{
    reject("Failed");
  },2000);
}

const prom = new Promise(exe);

prom.then(value=>{
  console.log("The resolved handler");
  console.log(value);
},failed=>{
  console.log("The rejection of the 'then' method");
  console.log(failed);
}).catch(failed=>{
  console.log("The rejection handler");
  console.log(failed);
});

Output:

The rejection of the 'then' method

Failed

Chaining Promise catch() Method in JavaScript:

The `catch` method also returns a promise (a resolved one). So if we chain a `catch` method to a `then` method, the resolved handler of the `then` method will be called.

Example: chaining the Promise catch() method in JavaScript

function exe(resolve, reject){
  setTimeout(()=>{
    reject("Failed");
  },2000);
}

const prom = new Promise(exe);

prom.then(value=>{
  console.log("The resolved handler");
  console.log(value);
},failed=>{
  console.log("The rejection of the 'then' method");
  console.log(failed);
}).catch(failed=>{
  console.log("The rejection handler");
  console.log(failed);
}).then(resolve=>{
  console.log("The resolved handler after the 'catch' method");
  console.log(resolve);
});

Output:

The rejection of the 'then' method

Failed

The resolved handler after the 'catch' method

undefined

Leave a Reply