Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Victor Mercier
Victor Mercier
14,667 Points

Do not really undertsand multiple then (chaining)

function addFive(n) {
  return n + 5;
}
function double(n) {
  return n * 2;
}
function finalValue(nextValue) {
  console.log(`The final value is ${nextValue}`);
}

const mathPromise = new Promise( (resolve, reject) => {
  setTimeout( () => {
    // resolve promise if 'value' is a number; otherwise, reject it
    if (typeof value === 'number') {
      resolve(value);
    } else {
      reject('You must specify a number as the value.')
    }
  }, 1000);
});
const value = 5;
mathPromise
  .then(addFive)
  .then(double)
  .then(finalValue)
  .catch( err => console.log(err) )

2 Answers

Steven Parker
Steven Parker
243,266 Points
Steven Parker
Steven Parker
243,266 Points

The concept of "chaining" is simply calling a method on the result of another method. The code you show here has a great example in the last few lines.

You show the "then" method being called on "mathPromise", and another "then" chained onto it, followed by yet another "then" chained onto that, and finally a "catch" chained on at the end. Each method is called in order, using the result from the previous one. Note that for this to work, all methods must return an object of the same class as what the next method is defined on.

Did you have any more specific question about chaining?

Victor Mercier
Victor Mercier
14,667 Points

Your answer is good but what do you mean by the same class?

Steven Parker
Steven Parker
243,266 Points
Steven Parker
Steven Parker
243,266 Points

For example, if you're calling a method on a Promise, it must return a Promise for you to be able to chain another of the same calls (which is what "then" does).

Justin Horner
STAFF
Justin Horner
Treehouse Guest Teacher
Justin Horner
Justin Horner
Treehouse Guest Teacher

Hello, Victor 👋

Steven has already posted a great answer here, so I'll just add to it to say when you call the then function on a promise, it returns a new promise that resolves to the return value of the function you pass to it. This means a new promise is returned on each call to then, allowing you to chain calls together.

Here's a step-by-step breakdown:

  • mathPromise resolves to 5
  • then is called on mathPromise and we pass the function addFive
  • The resolved value (5) from the previous promise is passed to addFive as the n parameter
  • addFive is called and returns 10
  • A new promise is created and resolves to the return value of addFive, which is 10. This new promise is returned to us from the then function.
  • Since we have a new promise from the first then call, we can call then again.

This process is simply repeated for every chained function called. Each time, a function is passed that resolves to a value and passed to the next chained function.

You can find more information on Promises at the Mozilla Developer Network (MDN).

I hope this helps.