FAQ: JavaScript Promises - Avoiding Common Mistakes

This community-built FAQ covers the “Avoiding Common Mistakes” exercise from the lesson “JavaScript Promises”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Asynchronous JavaScript

FAQs on the exercise Avoiding Common Mistakes

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

const {checkInventory, processPayment, shipOrder} = require(’./library.js’);

const order = {
items: [[‘sunglasses’, 1], [‘bags’, 2]],
giftcardBalance: 79.82
};

// Refactor the code below:

returns checkInventory(order)
.then((resolvedValueArray) => {
returns processPayment(resolvedValueArray);
})
.then((resolvedValueArray) => {
returns shipOrder(resolvedValueArray);
})
.then((successMessage) => {
console.log(successMessage);
});

1 Like

I didn’t get any error but it’s not getting output . Where is the error

What is so bad about nested promise? Doesn’t it work all the same?

before changing it into the correct code, it shows the same result, why is that? Shouldn’t it be different or having an error? Thanks!

7 Likes

looks like you put returns instead of return no return(s) its return

2 Likes

Why it doesn’t run when we use return two times?

Nested promises are difficult to understand for someone else (or yourself in the future) reading your code. That’s my understanding.

4 Likes

@mtf

Further to what @ran16 has already raised in this post in the topic for the previous exercise 8. Chaining Multiple Promises , I’ve turned this over and over and also looked at some additional documentation and other articles about the subject; but I still don’t fully understand why the lesson suggests that it’s a mistake not to explicity return the new promise with the return keyword in chained .then() methods, as follows:

checkInventory(order)
   .then((resolvedValueArray) => {
      return processPayment(resolvedValueArray);
   })
   .then((resolvedValueArray) => {
      return shipOrder(resolvedValueArray);
   })
   .then((successMessage) => {
      console.log(successMessage);
   })
   .catch((errorMessage) => {
      console.log(errorMessage);
   });

… because, if the first two promises resolve to fulfilled, the new promises with the new resolved array values (and not the default promise) are still clearly returned by the first two .then() methods when the return keyword is omitted, as follows:

/* With arrow function syntax, the single parameters in each success
   handler function don't need parentheses, so I've also removed these. */

checkInventory(order)
   .then(resolvedValueArray => processPayment(resolvedValueArray))
   .then(resolvedValueArray => shipOrder(resolvedValueArray))
   .then( /* same as before */ )
   .catch( /* same as before */ );

Does this work because the functions called in the success handlers already return the next promises? e.g.

const processPayment = (responseArray) => {
   ...
   return new Promise ((resolve, reject) => {   // promise returned here
      ...
      if ..... resolve([order, trackingNum]);
      else ... reject(`Cannot process order ...`);
   });
};

Are we being taught to always use the keyword return in .then() when chaining promises, in order to make sure our code also accounts for situations when the next promise won’t have already been returned, as in our example? (…although I haven’t come up with an alternative example of when that would actually happen.)

The correct new promises are also returned by the first two .then() methods with the following even more concise version:

checkInventory(order)
   .then(processPayment)
   .then(shipOrder)
   .then( /* same as before */ )
   .catch( /* same as before */ );

I’m assuming that we can also omit the resolved value parameters in the first two .then methods, as the functions processPayment and shipOrder are themselves the success handlers, and so there is no need to reproduce the success handlers within .then()  but, instead, it is enough to simply reference them via their function names.

Have I understood correctly what is happening here? :sweat_smile:
Is the last alternative version above an improvement, because it’s more concise but still robust? … or is it cutting corners which, although maybe not causing any problems in this example, could cause maintenance/sustainability issues if the program were to be developed further?

6 Likes

I feel like I need to read some detailed explanation of why things are done this way. The syntax is very complex and trying to think through what is actually being done is hard for me. I imagine as error handling gets complex this will be even harder to follow. :confused:

For the sake of concise readable code, is there anything wrong with doing the below? :

checkInventory(order)
    .then(resolvedValueArray => processPayment(resolvedValueArray))
    .then(resolvedValueArray => shipOrder(resolvedValueArray))
    .then(successMessage => console.log(successMessage));

I have tried to submit this answer but it is rejected. I’m guessing that the back-end logic checking the answer submitted for this exercise is explicitly checking the submitted code for the presence of the “return” keyword?

1 Like

I have this same question. I refactored the nested promises into proper chaining promises with es6 syntax. I am receiving an error.

const {checkInventory, processPayment, shipOrder} = require(‘./library.js’);

const order = {

items: [[‘sunglasses’, 1], [‘bags’, 2]],

giftcardBalance: 79.82

};

// Refactor the code below:

checkInventory(order)

.then(resolvedValueArray => processPayment(resolvedValueArray))

.then(resolvedValueArray => shipOrder(resolvedValueArray))

.then(successMessage => console.log(successMessage))

.catch(errorMessage => console.log(errorMessage));
1 Like

So, it was a mistake but still working perfectly?

1 Like

Hi,
I got an error although I got everything exactly right according to ‘get solution’…

here’s my code, what am I doing wrong??

const {checkInventory, processPayment, shipOrder} = require(’./library.js’);

const order = {
items: [[‘sunglasses’, 1], [‘bags’, 2]],
giftcardBalance: 79.82
};

// Refactor the code below:

checkInventory(order)
.then((resolvedValueArray) = {
return processPayment(resolvedValueArray);
})
.then((resolvedValueArray) => {
return shipOrder(resolvedValueArray)
})
.then((successMessage) => {
console.log(successMessage);
});

I think there is one = which should be =>.

3 Likes

thank you!
forgot about that one by now, but went back and fixed it :))

1 Like

You forgot to add return before processPayment and shipOrder, maybe that’s the reason for the error?

I’m using ES6 syntax arrow functions.

1 Like

Looks far easier to read imo though lol

Hello, all, I am on the last step of Sublesson 9 of 11, and I entered node app.js into the bash terminal as the last step said and everything ran fine, but when I clicked “Check Work” it flags it as incorrect and tells me to enter “node app.js” into the bash terminal, which I just did, so I am confused. Check solution confirms my code matches up exactly with the correct answer and it’s clearly working as you can see in the terminal. I even tried X-ing out and restarting the bash terminal several times. In addition, I tried refreshing the page and that didn’t work. So why am I still unable to move forward? I have attached a screenshot of what I am seeing. Thanks in advance for any assistance.