Asynchronous JavaScript Tutorial #8 - Chaining Promises

Get the full Modern JavaScript tutorial on Udemy here (discount auto-applied):

🐱‍👤🐱‍👤 JOIN THE GANG -
----------------------------------------
🐱‍💻 🐱‍💻 My Udemy Courses:

🐱‍💻 🐱‍💻 Helpful Links:

🐱‍💻 🐱‍💻 Social Links:

[hoangtronglap]

No one explains callbacks, promises and async-await like you do! kudos to Shaun!

[blandonavera]

Still relevant two years later. You explain so well, there is nothing left to improve! I hope you make a lot of money with it.

[romyt]

For me, you're gaining Paradise.
This thing is quite confusing, but you succeed in keeping it simple to understand for newbies like me.
Thanks a million.

[ashutoshbw]

Thank you Shaun!!!! Awesome tutorial. Promises never seemed so easy and fun before.

[cqcboy]

I had no idea you could chain promises like that as a return, i kept making promise calls chains inside each .then, this looks so much cleaner! Thank you for your work!

[petMonster]

4:14 - Honestly, the triangle was way easier for me to follow. This looks like one big bloody mess to me. If the only reason to do it this way is to avoid the nesting from the other way, I don't see that as a benefit. However, if there's some other benefit writing it this way that you can't get writing it the other way, then obviously that has to be considered when making the decision of how one should write their code.

[msaurabh]

I have been struggling with promise hell let alone callbacks but not anymore.. your videos are so helpful and so easy to understand. you are a genius, Shaun!! Thank you for creating these videos. I'd definitely recommend others to purchase Shaun's content.

One error I've been stuck with is

from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
When I try to access the files in the GET method... But I am hoping to find a resolution on google :)

[SridTech]

Actually, this video playlist not only cleared my doubts about async js but also a lot more things.

[melsamar]

I have a stupid question. What if I have multiple chained promises and at one point in the middle of all the ".then"s it does not return a promise. What will happen to the succeeding ".then"s?

[tpol]

Thank you this is very well explained!

[HesamFarsiDehnavi]

But this chain has a problem that is if the first has an error the second and third won't be executed

[googleboughtmee]

Bloody hell, I think the callback hell was less code and easier to follow! My head is spinning.

Edit: Never mind - in the video after this one it makes sense why we'd use this method.

[davudhmdov]

I'm crazy about your explanations.

[abhinavanroy]

Hi dude, I really appreciate your tutorials! I just had this one doubt, what is the parent promise breaks (crashes) then will the child promises (chained ones) will be executed??

[prajwalsiwakoti]

What if we want to handle each error message differently? Will that be possible?

[Wyvernnnn]

Maybe you should've talked about await there

[Martin]

Amazing videos. Are you likely to do a discount on your Udemy Javascript course again? I would buy it today.

[tedshapera]

Can promise chaining be used to order element.animate() functions? I've tried to apply the methods covered here to this but maybe promises don't work with animations? Here's part of the code for a page containing a simple elevator simulation:

function moveElevator(startFloor, endFloor) {
return move(startFloor, endFloor)
.then(openDoors(endFloor))
.catch((err) => {
console.log('promise rejected: ', err);
});
}

Both the move(startFloor, endFloor) and the openDoors(endFloor) functions are working and animating, BUT AT THE SAME TIME!

I just can't get the move function to finish BEFORE the openDoors function starts.
I would really appreciate any help to figure out what I'm doing wrong!

Thanks,
Ted

[abdelmajidalahyane]

if the first promise gets rejected then the others won't be executed ...right ?

[mikhaelesa]

What about this kind of chaining


  console.log('Promise 1 resolved ',  data);

  console.log('Promise 2 resloved',  data);

  console.log('Promise 3 resolved',  data);
})).catch(err =>{
  console.log(err);
})



When i use return like in this video, when there is an error in the previous promise, the next promise wouldn't be executed. But using this, the next promise would still be executed and the error would still be thrown. Is this good or bad?