How does `.then` know what to pass?

In the example for this exercise, the handleSuccess function takes in a variable and logs it to console. My first question is how does the prom.then function know which handle function to pass through? Since the resolvedValue variable doesn’t explicitly refer to the resolve outcome, how does it know what to log to console?

let prom = new Promise((resolve, reject) => {
let num = Math.random();
if (num < .5 ){
resolve(‘Yay!’);
} else {
reject(‘Ohhh noooo!’);
}
});

const handleSuccess = (resolvedValue) => {
console.log(resolvedValue);
};

const handleFailure = (rejectionReason) => {
console.log(rejectionReason);
};

prom.then(handleSuccess, handleFailure);

My second question is does order matter? If I flip the order of handleSuccess and handleFailure so that it is:
const handleFailure = (rejectionReason) => {
console.log(rejectionReason);
};

const handleSuccess = (resolvedValue) => {
console.log(resolvedValue);
};

prom.then(handleSuccess, handleFailure);
Does the prom.then function still pass the correct handles?

6 Likes

Did anyone reply to this question yet? I also wonder how the .then() method knows which handle to use for resolve/reject. I swapped them in the syntax but the result remains the same so somehow the method knows which one is which not just by the order they appear in, I just don’t get how.

2 Likes

It actually is just based off the order of the arguments. :slight_smile: The first function you pass in will always be used for resolve, the second for reject.

It is a bit confusing in the example, because even if you do swap the arguments, the result is the same. But that’s just because the success function and failure function do exactly the same thing: take in a message and print it to the console.

You can modify the functions a little to make it easier to see which one is being called, by adding “Success” or “Failure” to the start of the message:

const handleSuccess = (resolvedValue) => {
    console.log(`Success: ${resolvedValue}`);
};

const handleFailure = (rejectReason) => {
    console.log(`Failure: ${rejectReason}`);
};

Then, you can try swapping them around in the .then(). You should see the first function you pass to then() is always used as the resolve function, even if it says “failure,” and vice versa.

9 Likes

Hello guys,
I have a question related to part 6, specifically to this example:

04

If ‘handleSuccess’ and ‘handleFailure’ are functions that take in one argument, why when they are inserted in ‘then(handleSuccess, handleFailure)’ don’t take any arguments?

I’ve the doubt that’s a stupid question but I must resolve this.

Thanks for your answer.

2 Likes

callbacks do not take arguments because they are not invoked when passed in. Only the representation of the function is given. The then method will invoke the one that matches the outcome. The first callback is for success, the second for failure. then decides which to use and gives the appropriate argument at that time.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

2 Likes

Thank you, that’s clear now.

1 Like

I don’t think I fully understand this code in the example:

const prom = new Promise((resolve, reject) => {
resolve(‘Yay!’);
});

const handleSuccess = (resolvedValue) => {
console.log(resolvedValue);
};

prom.then(handleSuccess); // Prints: ‘Yay!’

Is an anonymous function being declared inside the Promise() function instead of declaring it separately and then passing it into Promise() like we did before?

Also, how does it know what to pass in for the “resolvedValue” parameter?

2 Likes

The .then method will take answer of the promise function (in this case, prom), and if it was resolved, pass it in to the first callback function (in this case, handleSuccess) and if it was rejected, pass it in to the second callback function (in this case, handleFailure)

1 Like