How to chain promises in JavaScript

Chaining promises allows you to perform sequential asynchronous operations where each step depends on the previous one’s result. As the creator of CoreUI, a widely used open-source UI library, I’ve chained promises extensively for multi-step data processing, authentication flows, and complex API interactions. From my expertise, promise chaining with .then() methods provides a clean alternative to nested callbacks while maintaining readable code flow. This approach ensures operations execute in the correct order while handling errors gracefully.

Chain promises using multiple .then() methods to perform sequential async operations.

fetchUser(userId)
  .then(user => fetchUserPosts(user.id))
  .then(posts => posts.filter(post => post.published))
  .then(publishedPosts => console.log(publishedPosts))

Here each .then() receives the resolved value from the previous promise and can return either a value or another promise. When returning a promise, the chain waits for it to resolve before proceeding. This creates a sequential flow where fetchUserPosts only runs after fetchUser completes, and filtering only happens after posts are retrieved.

Best Practice Note:

Each .then() should return a value or promise to maintain the chain. Add a single .catch() at the end to handle errors from any step. This is the same pattern we use in CoreUI for complex authentication and data loading sequences.


Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.


About the Author