Promise .then, .catch, and .finally Explained

Promise .then, .catch, and .finally Explained

.then, .catch, and .finally are the three handlers for consuming a promise. Here is what each does.

.then(onFulfilled, onRejected?)

Runs when the promise fulfills. Receives the value. Returns a new promise.

fetchP("/api")
  .then((response) => response.json())
  .then((data) => console.log(data));
``
You can also pass a second argument (onRejected), but `.catch` is cleaner.

### .catch(onRejected)

Runs when the promise rejects (or a `.then` throws). Receives the error. Returns a new promise.

```js
fetchP("/api")
  .then((data) => process(data))
  .catch((err) => console.error("Error:", err));
``
`.catch` catches errors from anywhere in the chain above it.

### .finally(onSettled)

Runs when the promise settles (fulfilled or rejected). Does not receive the value or error. Returns a new promise (with the same value/error).

```js
fetchP("/api")
  .then((data) => render(data))
  .catch((err) => console.error(err))
  .finally(() => hideSpinner());
``
Use `.finally` for cleanup (hiding spinners, closing connections).

### Chaining

Each handler returns a new promise:

```js
fetchP("/api")
  .then((res) => res.json())   // returns a promise
  .then((data) => process(data)) // returns a promise
  .then((result) => render(result)) // returns a promise
  .catch((err) => handleError(err))
  .finally(() => cleanup());
``
If a `.then` callback returns a value, the next `.then` receives it. If it returns a promise, the next `.then` waits for it.

### Error Propagation

If a `.then` throws, the error propagates to the next `.catch`:

```js
fetchP("/api")
  .then((data) => { throw new Error("oops"); })
  .then((data) => console.log("skipped"))
  .catch((err) => console.error(err)); // catches the error
``
### Recovering From Errors

After a `.catch`, the chain continues with the value returned by `.catch`:

```js
fetchP("/api")
  .then((data) => process(data))
  .catch((err) => "fallback") // recover with a fallback value
  .then((result) => render(result)); // receives "fallback"
``
### The Takeaway

`.then` handles fulfillment, `.catch` handles rejection (or thrown errors), `.finally` handles settlement (cleanup). Each returns a new promise, enabling chaining. Errors propagate to the next `.catch`. After `.catch`, the chain continues with the recovered value.