w3docs logo

JavaScript: Error handling with promises

  1. Using .catch() Method
  2. Using Second Argument of .then()
  3. Advanced Error Handling Techniques
  4. Best Practices for Promise Error Handling
  5. Conclusion
  6. Practice Your Knowledge new
  7. Related Resources

JavaScript promises are a fundamental part of managing asynchronous operations, allowing developers to handle asynchronous events with more flexibility and ease (See JavaScript: Promises). Error handling in promises is crucial for writing robust JavaScript code that can deal with unexpected issues without crashing the application.

Error handling in promises is accomplished using the .catch() method or by passing a second argument to the .then() method. Both methods provide ways to manage and recover from errors that occur during the execution of asynchronous operations.

Using .catch() Method

The .catch() method is used to catch any errors that occur during the execution of the promise chain.

const promise = new Promise((resolve, reject) => { setTimeout(() => { reject("failed!") }, 1000) }); promise .then(result => { // handle successful result }) .catch(error => { // handle error console.error(error); });

Using Second Argument of .then()

Alternatively, a second argument can be added to .then() to handle errors specifically after the first argument’s execution.

const promise = new Promise((resolve, reject) => { setTimeout(() => { reject("failed!") }, 1000) }); promise .then( result => { // handle successful result }, error => { // handle error console.error(error); } );

Advanced Error Handling Techniques

Propagating Errors

Errors should be propagated correctly through the promise chain to ensure that they can be handled at the appropriate level. For example, if you write the catch block before the then block, the then block will always be executed.

When you bring the catch block before the then block, any error occurring in the then block will remain unhandled, unless you use another catch block after that.
const promise = new Promise((resolve, reject) => { throw new Error('Something failed'); }); promise .catch(error => { console.error('Caught 1:', error.message); }) .then(result => { console.log('then!'); throw new Error('error in then block'); }) .catch(error => { console.error('Caught 2:', error.message); });

Handling Specific Errors

JavaScript allows for more nuanced error handling strategies, such as filtering errors based on their type or the specific circumstances of the error. In the following example we handle a TypeError. A TypeError typically happens when a value is not of the expected type and therefore our desired operation cannot be done.

const promise = new Promise((resolve, reject) => { throw new TypeError("my custom type error") }); promise .catch(error => { if (error instanceof TypeError) { console.error('TypeError caught: ', error.message); } else { console.error('Unknown error caught: ', error.message); } })

Best Practices for Promise Error Handling

  1. Always return or throw errors in catch blocks to ensure that errors do not go silently ignored.
  2. Chain promises properly to ensure that errors are caught and handled.
  3. Use finally blocks where necessary to perform cleanup tasks, regardless of the promise’s outcome.

Implementing a Finally Block

The finally() method is used to execute a block of code after promises settle, regardless of the outcome.

const promise = new Promise((resolve, reject) => { throw new TypeError("my custom type error") }); promise .then(result => { console.log("then"); }) .catch(error => { console.error(error); }) .finally(() => { console.log('Operation completed.'); });

Conclusion

Effective error handling in JavaScript promises is essential for developing reliable and resilient web applications. By understanding and utilizing the .catch(), second argument of .then(), and finally() methods, developers can ensure that their applications handle asynchronous errors gracefully and maintain smooth operation under various conditions. Employing these methods will enhance the functionality and user experience of your JavaScript applications.

Practice Your Knowledge

What is the key concept to understand about promises in JavaScript error handling?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

❮ Prev Next ❯
Do you find this helpful?