Promise .catch(): Handling Rejections

Why it exists

Synchronous code uses try...catch to handle runtime errors. Asynchronous operations using promises execute outside the initial call stack, so a standard try...catch block around the entire chain won't catch failures that happen later. .catch() provides the mechanism to handle these asynchronous rejections.

The mental model

.catch() is the try...catch equivalent for promise chains. It's a specialized .then() block designed only to execute when a promise is rejected. It acts as a safety net, catching any rejection from any preceding promise in the chain, preventing unhandled promise rejections.

How it works

The .catch(onRejected) method is syntactic sugar for .then(null, onRejected). When a promise in a chain rejects, JavaScript skips all subsequent .then() success handlers and looks for the next rejection handler, which is typically a .catch() block. The function inside .catch() receives the rejection reason (usually an Error object) as its argument. Crucially, .catch() itself returns a new promise. This new promise resolves with the return value of your error handler, allowing the chain to recover. If your handler throws or re-throws an error, the new promise rejects.

When to use it

Use .catch() at the end of any promise chain to create a single, centralized error handling point. This is perfect for logging errors, showing a user-facing error message, or performing cleanup after a failed sequence of async operations like multiple API calls.

When not to use it

Avoid using .catch() in the middle of a chain unless you have a specific recovery strategy, like trying a fallback API or returning a cached value. If you just log the error mid-chain, the promise returned by .catch() will be fulfilled, and subsequent .then() blocks will execute as if everything succeeded, often with missing data, leading to confusing bugs.

One canonical example

Consider fetching user data and parsing it as JSON. The chain is fetch().then().then().catch(). If the network request fails, the first .then is skipped. If the response is not 'ok' and you throw an error, the second .then is skipped. If parsing the JSON fails, the error is also caught. The single .catch at the end handles any of these failure modes:

fetch('/api/user/123')
.then(response => { if (!response.ok) { throw new Error('Network error'); } return response.json(); })
.then(user => console.log(user.name))
.catch(error => console.error('Failed to fetch user:', error));