If you work in JavaScript web development, I guess you're already familiar with a and have faced callback hell multiple times before. Promise chaining in JavaScript is one way to solve the callback hell issue, and we will discuss it in this article. However, let's recap a little bit for those who are not familiar with the concepts. Promise What is a JavaScript ? Promise In JavaScript (ES6 and above), a is an object representing the state and result of asynchronous operations such as an API call, or IO read/write. The states include , , and . Promise pending fulfilled rejected Pending: An operation is in progress, and no result has been returned. Fulfilled: An operation was a success, and the result was returned. Rejected:  An operation was a failure, and the error was returned. A has two methods: and . The method accepts a of an action to be initiated after a promise is fulfilled, meanwhile, the runs whenever a promise is rejected. Promise then catch then callback catch // Asynchronous API call operation
getWeatherTodayPromise
   .then((weatherForecast) => { // Fulfilled
      // Synchronous operation
      display(weatherForecast)
   })
   .catch((error) = > { // Rejected
      console.error(error)
   }) What is callback hell? In short, it is when your callbacks have been nested multiple levels to the point that it becomes unmanageable. This can happen in any programming language and is more common in asynchronous operations. , and examples in the article are based on this callback hell variance. A deeply nested promise and callback in JavaScript is just one flavor of callback hell // A typical callback hell which involves multiple JavaScript promises
firstPromise
   .then(secondPromise
      .then(thirdPromise
         .then(...).catch(...)
      ).catch(...)
   ).catch(...) Readability is one thing, but callback hell can cause other scoping issues. A typical one is error hiding (swallowing) when an error raised by an inner promise was not caught. // Asynchronous API call operation
getWeatherTodayPromise
   .then((weatherForecast) => {
      // Asynchronous IO operation
      writeWeatherForecastToLogFilePromise(weatherForecast) // FAILED

          ...
          
         // Unlike try-catch, there is no outer "catch-all" solution
         // You must have a "catch" at every nested promise
         // Or else, the promise is not terminated, and the error information is lost
         .catch((error) => {
            // IO error is caught here
            console.error("Inner promise", error)
         })
   })
   .catch((error) = > {
       // IO error is NOT caught here
       console.error("Outer promise", error)
   }) What is promise chaining in JavaScript? You just learned a callback hell indicates unmanageable nested levels of callbacks. With that said, one way to solve the issue is to anymore. Make it shallow! make the callbacks NOT nested in JavaScript is when multiple and methods are called successively to completely remove the nested levels, while still maintaining the intended outputs. You can say it is one way to refactor your codebase. Promise chaining then catch // Promise chaining
firstPromise
   .then(() => secondPromise)
   .then(() => thirdPromise)
   .then(...)
   .catch(...)
   .catch(...)
   .catch(...)
   .then(...)

// A typical callback hell which involves multiple JavaScript promises
firstPromise
   .then(secondPromise
      .then(thirdPromise
         .then(...).catch(...)
      ).catch(...)
   ).catch(...) If you are dealing with regular callback-based functions (NOT promises), you need to promisify the functions first to apply promise chaining. There are ways to do so, such as using an library. es6-promisify How does promise chaining work in JavaScript? and are methods of a object, so to create a chain, a callback in the method must return a new . then catch Promise then Promise // Correct implementation
// "() => something" is a shorthand for "() => {return something})
const secondPromise = firstPromise.then(() => newPromise)
secondPromise.then(() => anotherPromise).then(...)

// Wrong implementation and an exception is raised
firstPromise.then(() => null).then(...) The result of a promise is carried to the next . then getWeatherTodayPromise
   .then(weatherForecastResult => writeWeatherForecastToLogFilePromise(weatherForecastResult))
   // writeWeatherForecastToLogFilePromise(weatherForecastResult) if fulfilled will provide "ioWriteResult"
   .then(ioWriteResult => Promise.all([
      anotherPromise(ioWriteResult),
      andSomethingElsePromise(),
    ]))
   .then(listOfResults => ...) We can manually initiate and return a new object to form promise chaining. Rather than doing tasks in one callback, you can apply this technique to segment the codebase into smaller chunks. Promise firstPromise
   .then(() => {
       const isSuccess = synchronousOperation() // boolean
       return isSuccess ? Promise.resolve("Success") : Promise.reject(new Error("404"))
    })
    .then((result) => console.log(result)) // Print "Success"
    .catch(error) => console.error(error)) // Print an error with "404" message A method has a second and optional argument, but as we don't use it, whenever an exception is raised, the browser looks down the whole promise chain to find the first acceptable for a given error. then onRejectedCallback catch By using promise chaining, you can have one outer "catch-all" solution like , so no more possibility of error swallowing. You can have a conditional statement in one for multiple errors, or you can segment them into multiple separated as shown below. try-catch catch catch rejected5xxPromise
   .catch(HTTP 4xx) // Browser: "Not here"
   .catch(HTTP 5xx) // Browser: "Okay, this catches the 5xx error"
   .catch(Other unexpected errors) // Skip You can chain a after . This means "always operate no matter what". then catch rejected5xxPromise
   .catch(HTTP 5xx)
   .then(console.log("This line is always printed out")) Wrap up JavaScript promise chaining is a simple but powerful feature to resolve a common nested callback issue (callback hell). To chain promises, there are two main points you need to remember. Multiple and can be called successively such as . then catch promise.then(...).then(...).catch(...).catch(...) A call back in the method must return a new object so the chain can be continued. then Promise The rule also applies to TypeScript. In ES2016 (a.k.a ES7), the function was introduced and it makes our life even easier. That said, if you cannot use the ES7 feature for some reason, then promise chaining is a great choice to refactor your codebase. async/await Originally published at . JavaScript Promise Chaining - Avoid Callback Hell Interested in web development? My other articles might be helpful to you! Front end, top frameworks and libraries you should know GitHub CLI in 3 minutes

Chain

Is Open Source Software A Practical Alternative?

How to Setup WordPress Website on Google Cloud For Free

Nominated for 2022 - HackerNoon Contributor of the Year - Cicd

Don't Nest Callbacks, Use Promise Chaining Instead

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Build a New Website With Open-Source Headless CMS: Strapi, Payload, and Directus Review

10 Must Have Chrome Extensions for a Web Developer

The Noonification: Can Mankind Survive as an Interplanetary Species? (10/20/2022)

132 Stories To Learn About Performance

3 Golang Pitfalls Every Developer Needs to Know

🤩 24 Coolest VSCode Extensions That Will Rock Your World 🛠

Build a New Website With Open-Source Headless CMS: Strapi, Payload, and Directus Review

10 Must Have Chrome Extensions for a Web Developer

The Noonification: Can Mankind Survive as an Interplanetary Species? (10/20/2022)

132 Stories To Learn About Performance

3 Golang Pitfalls Every Developer Needs to Know

🤩 24 Coolest VSCode Extensions That Will Rock Your World 🛠

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps