javaScript promises explained tutorial

hello and welcome to TechSoup tutorial today we are going to learn about promises in JavaScript promises in JavaScript it's pretty much like promises in real life your kid makes you a promise to clean the room by end of the day either by end of the day he finishes his promise by cleaning the room or he fails in JavaScript promises are similar we will first look at a simple example of promise then we will understand why do we need promises in JavaScript and lastly we will look at example where you have dependency where one promise depends on the second promise to finish so firstly this is how you define a promise you would say let this is the name of my promise equal to new promise this takes a callback function and this callback function has two arguments the first argument is resolved and the second argument is reject the resolve really means I am fulfilling this promise and I'm resolving it means you finished what you said you have you would finish reject means promise is not fulfilled in given time or given constraint I'm rejecting it so you have two things either resolve it or reject inside here you first thing you would do is because a promise is to clean the room which means you're going to clean the room so I'm not going to write how to clean the room in JavaScript so I'm just gonna write a comment that cleaning the room now when the cleaning of the room is finished I want to set up some status right so here I'm just gonna equal to trip is clean if the room is clean and when I resolve it so simply I would run the function resolve which is you know to call my function mmm else I am going to reject it the first part is to do what you supposed to do the promise to do something so you're going to do that first and then the second part is to either resolve or reject when is this promise the second part is you can execute this promise this could be taking a little bit longer time you have to wait for it and there is a method that gets called when the promise is resolved which is call then so when this method is fired which means the promise is resolved so within this method you can have a callback function and because it's only executed when the the promises of room is and then what I can do I can receive the status back from this resolve function so here I can just say clean ok so I can say from resolve which would be this so when it resolves it would pass this argument inside this all and when the promise is fulfilled using then it will pass this argument which is the same same guy here clean so I can then simply say from resolve this so if I run this I get the room is clean now let's say if you reject it what would happen so for that we can chain another argument called catch here I would pass a function and I would say from rejected so here I would have to say not clean right so if it's clean then it would resolve it if it's not clean then it reject it so if it's going to be rejected I need to say false here then in that case it would reject it and I would get this not clean through this argument and I can console of it okay so be the messages the room is not clean now again here what we promised to do is happening by the way we're not doing anything but in order to explain the concept I wanted to keep it very clean and assuming that after doing this is clean a set that makes the promise either resolve or reject before we move on I'm saving this example here so if you go to this particular URL you can check it out okay now look at a little bit of complex example where you have to finish something before you can start something right so let's say if you you know you cannot remove the garbage before you can actually clean the room see how to clean the room so once you finish cleaning your room then you can remove the garbage and once you you know do both then you get ice cream you know your parents would give you ice cream as an award you cannot get the reward until you clean the room and take the garbage so there's dependency right so here in the code I have three separate promises basically I have three functions the first function let the clean room it actually returns a promise to clean the room and within I'm directly resolving it I don't I don't need to wait for I don't we clean so I'm just resolving it right away otherwise you would here you would basically clean the room and then resolve it either resolve or reject but I'm just resolving it mint it clean same thing happening for remove the garbage and winning the ice cream okay now I want to write this nested promise where once the cleaning is done I want to remove the garbage and once garbage is removed I want to get the ice cream okay so our first right clean the room and see how the syntax is so nice and this is why we use promises so I would first clean the room so when I execute this function ate nothing but returns this promise okay that I've defined here and when as I said before it has a damn function which actually wait for promised you finished and only then it would run this function then now inside this dent function I would have a callback function since it only runs when these this promise is finished then I can start another promise which is serial the garbage so all I'm going to simply do is return garbage now when I execute this this function it nothing but it returns this promise and basically this now became a becomes a promise for a remove the garbage so I can actually run then on that promise within that I have a function that waits for that promise to finish to remove the garbage once it's finished I can return another function call win icecream when that is done I can simply say I can add another function side which basically runs when everything is done all three promises have been fulfilled here you would say if I run this it has finished actually since for every resolve I am getting a message back into this dent functions because when I finished cleaning the room it sends a message with the resolve call clean the room I can actually catch this message in a result and I can pass that message into the next function when I same thing I would get a result here as well and I can pass it here and in the end I would get a result here as well now what I can do I can whatever message that I get in the first after cleaning the room message and I can append this message so what is going to do is going to can get all the messages resulting from fulfilling the each promises oh and actually I need to say finished plus if I run this it says finished clean the room remove a garbage one ice cream all three done and you can see it happened in that sequence because of this dependency so this is how you can actually put the dependency and you can see how clean this code is compared to if you were to use a simple callback function to do this without using promises you will have one function where you you have to nest everything and if you have like a so many callback function it becomes a nightmare so promises at least solves this problem because you can independently define these promises and then when you resolve it it's also quite clean now I have saved this example in this URL so if you want to play around with it you can load this I will also provide the link in the YouTube video as well now let's say if you want to do all these in parallel with you don't want to wait for one to finish and second to start you just want them all three promises spawn at the same time and you want once all of them are done you want to do something so for that I will do something like this I would say promise dot all and inside I will pass an array with all three promises so I would clean the room remove the garbage and when ice cream and they will all finish I would have it then and here I would have the callback function I'll finish when I run this gives me the result back says it's all finished but let's say instead of waiting for all the finish what if you just want one of them to finish any of them then you want to do something for that you would use instead of all you would say please you would take race the de log would fire up and say one of them is finished let's see you three server with the same data and you try to pull for redundancy and as soon as the first one shows up you are satisfied because you got the data right you don't want to wait for the other two to finish right in that case you would use this then it comes back with one of them is finished anyway so that's one of the promises I promise this tutorial and I deliver it so please resolve it if you liked the tutorial please give a comment like it and subscribe thank you you

Channel: techsith

Views: 524,946

Rating: 4.9392605 out of 5

Keywords: advanced javascript tutorials, tutorials, lessons, techsith, techsithtube, techsith.com, training, javaScript Training, Web Developement tutorials, javaScript promises, promises in javascript, javascript promises example

Id: s6SH72uAn3Q

Length: 13min 10sec (790 seconds)

Published: Wed Aug 03 2016

Reddit Comments

[u/overneath42]

This one is also excellent - http://kosamari.com/notes/the-promise-of-a-burger-party