Promise Chaining in JavaScript

Promise Chaining in JavaScript

Promise chaining lets you sequence async operations flatly instead of nesting callbacks. Here is how it works.

Basic Chaining

fetchUserP(id)
  .then((user) => fetchPostsP(user))
  .then((posts) => fetchCommentsP(posts[0]))
  .then((comments) => render(user, posts, comments));
``
Each `.then` returns a new promise. The next `.then` waits for it.

### Returning Values

If a `.then` callback returns a value, the next `.then` receives it:

```js
Promise.resolve(5)
  .then((n) => n + 1)     // 6
  .then((n) => n * 2)     // 12
  .then((n) => console.log(n)); // 12
``
### Returning Promises

If a `.then` callback returns a promise, the next `.then` waits for it:

```js
Promise.resolve(1)
  .then((n) => fetchP(`/api/${n}`)) // returns a promise
  .then((data) => data.json())       // waits, then transforms
  .then((result) => console.log(result));
``
### Common Pitfall: Not Returning

```js
// bad: not returning (the next .then receives undefined)
Promise.resolve(5)
  .then((n) => { n + 1; }) // undefined (no return)
  .then((n) => console.log(n)); // undefined

// good: return
Promise.resolve(5)
  .then((n) => n + 1) // 6
  .then((n) => console.log(n)); // 6
``
Arrow functions with block bodies need `return`. Expression bodies (no braces) return implicitly.

### Common Pitfall: Breaking the Chain

```js
// bad: the chain breaks (p1 is not chained to p2)
const p1 = fetchUserP(id);
p1.then((user) => fetchPostsP(user));
p1.then((user) => fetchCommentsP(user));
// both .then run on p1, not on each other

// good: chain
fetchUserP(id)
  .then((user) => fetchPostsP(user))
  .then((posts) => fetchCommentsP(posts[0]));
``
### Common Pitfall: Nested .then (Mini Callback Hell)

```js
// bad: nesting (defeats the purpose of promises)
fetchUserP(id).then((user) => {
  fetchPostsP(user).then((posts) => {
    fetchCommentsP(posts[0]).then((comments) => {
      render(user, posts, comments);
    });
  });
});

// good: chain flatly
fetchUserP(id)
  .then((user) => fetchPostsP(user).then((posts) => ({ user, posts })))
  .then(({ user, posts }) => fetchCommentsP(posts[0]).then((comments) => ({ user, posts, comments })))
  .then(({ user, posts, comments }) => render(user, posts, comments));
``
Or use async/await (cleanest).

### The Takeaway

Promise chaining sequences async operations flatly. Each `.then` returns a new promise. Return values or promises to pass them to the next `.then`. Common pitfalls: not returning (next receives undefined), breaking the chain (parallel instead of sequential), and nesting (defeats the purpose). Use async/await for the cleanest code.