JavaScript Promises In 10 Minutes

hello everyone kyle here from webdev made simple, in today's video we are going to talk about

promises

in

javascript

which seem incredibly difficult but they are much simpler than they actually seem, so let's start now, let's talk about the idea of ​​a promise . Before we get into the actual syntax, a promise in JavaScript is like a promise in real life, what you do is commit to something by saying: I promise to do something, for example, I promise to make the best promised video I can. and then that promise has two results, either that promise is completed, it is resolved or that promise fails and is rejected, so if I give you the best video on

promises

, then it would resolve my promise to do it, but if it didn't If you would I give the best video on promises, so that would be rejected because I couldn't complete that promise and I rejected it, so now let's look at the actual syntax of creating a promise, we just create a variable here that we'll call is P and we're going to set it with a new promise and this promise object will take a parameter which is a function that is passed to the resolve and reject variables, so we have a resolve parameter, our reject parameter, and then we need to actually create the definition of that function inside and if you are confused by this arrow syntax here just watch my video where I cover arrow syntax for functions because it is extremely simple and much easier to write functions this way so after we are done checking that now inside this promises section, we need to find what the actual promise is, so in my example, the code inside here would be me giving you the best video on promises, so we're just going to put some simple ones. code here we are going to create a variable a we will simply set it to 1 plus 1 that way this is what the promise does and if this fails we will reject it so we would say if a is equal to 2 we would solve it but if it's not, let's say it's not equal to 2, we would reject it, so in the rejection we can pass anything we want to this rejection.

We'll just pass it the message that says failed and then in our solve this again, we can pass it absolutely anything we want, but we'll just pass it a message that says success, so as you know, this code will always be successful because 1 plus 1 is always equals 2, so you'll remember this. is a resolved method that is passed in, but if we changed this to be 1 plus 2 we would get this reject method because it is no longer equal to two and we would be calling the reject method, so now let's look at how we actually interact with promises.

So if we come down here, we can just say P, since that's our promise, then all we have to do is say dot, then anything within a dot will be executed to resolve because I say I'll give you the best. video ever in promises, then you're going to do something else after I'm done with that, so here this is then, all it does is take a method, in our case, it will only have a single parameter since we are passing a parameter unique to the result and that will just be our message and then we just wanted to find what do we do with that function so we can say the console point log, this is in the Senate, it is in the then and then we can just pass it. message so we can see what it says but in order to catch an error we need to use the dot catch version of this so we just say dot catch and this will catch any errors which is our rejected state and like our then we're just passing a single parameter of a message and we can do something very similar, we do the console dot logging, this is in catch the catch and we can just print that message and that's it, that's exactly how promises are used.

They are very similar to the callbacks that we will look at in a slightly cleaner way of doing callbacks and as you can see it will be called when our promise resolves successfully and the catch will be called if my promise is rejected or fails, so now let's run this and see what it looks like, so I hope we say you'll see that we have this at that time and it's success because my plus one equals two and If we change this so that it's not true and save it again, You will see that it is in the capture and it failed.

As you can see, when we call this, we create a promise here and we tell it what we want to do when it succeeds we tell it what we want to do when it fails and then in our code we say do this when it succeeds and do this when it fails the promises are actually great when you need to do something that will take a long time in the background, like downloading an image from a different server and you only want to do something after it's complete instead of making everything else wait and then you can also detect it to see if it failed, that way you can try again or give the user an error message if it fails, so now let's look at an example of how we can take something that uses callbacks, which is what promises are meant to replace, and actually replace it with promises and it's much easier than it seems. open a very simple callback function that takes two callbacks, one for success and one for failure, and all it does is check two variables to see if either of them is true, if it is it will return a error and if it is not. of these variables are true, it will call the success callback saying everything went well, so you won't see the tutorial callback function.

All we do is call it and give it our two callbacks, our first callback will be the first successful callback and our second callback will be for an error, so if we save this and run it, as you can see, both variables are false and we get thumbs up and subscribe but if we change one of these variables is true let's say the user left. as I watch the tutorial and now I'm going to say the user left with a frown or if we change that back to false and change this saying the user is now viewing cat memes to true it will say the user is viewing a meme of a cat and that cats are better than me, so now let's implement this using promises instead of callbacks because this is what promises were really meant to solve, so all we have to do is copy this entire function here , just paste it in here a little bit so we can have it to work with and we'll just change it to be a promise instead of a callback for the name and we can completely remove both callback functions for the parameters because that's the goal of using promises is that we don't have these callbacks anymore and all we have to do inside here is return a promise so we can say return new promise and as we know that promise takes two parameters, result and reject, and inside that function we simply want to define all of our code that was calling these callbacks, so resolve will be our success callback, so we can replace all the places where we have callback with resolve and reject will be that callback of error callbacks, so we'll just replace all of those and there we go, we've completely overhauled this function to use it instead of callbacks and as you can see the code itself is almost exactly the same, all we did was change some variable names and now we return a new promise instead of calling. the callbacks, so now let's see how we can use this function, so let's copy what we have here so we can see how we need to change this view tutorial call to the view tutorial promise, so the first thing we know is that this is a function that takes no parameters, so we need to call this function and then do something afterwards, since it returns a promise, so we say period every now and then, as if we know it will be our successful callback so we can make it the first. method here, which is this one, so as soon as that function finishes, we just need to finish it and now we can do our catch point, so we added keshan point here to catch all our errors and voila, we have completely transformed that callback. use promises now and as you can see again our code is almost exactly the same so now if I comment out all of this callback related stuff and we run it again you'll see that we get exactly the same result no matter which set of variables that we have but still we change it all to false you will see that we get success change this to true and again you will see that the user left and this now uses promises instead of using callbacks and as you can see the code It's much cleaner. write than to use callbacks because as you start nesting callbacks, you start getting into a huge world of problems where your code keeps bleeding even further under promises instead of nesting callbacks, all you do is just adding another one and then it would look like this at that point, instead of having a callback inside a callback inside a callback, which is what is known as callback hell and is absolutely terrible , promises are great and completely solve that problem for us now that we have to understand how promises work, let's take a look at some of the things we can do with promises.

I've changed my code a little here so that now we only have three simple promises created and all of them are super simple. what they always do is resolve, they never reject and they only send a single message when they resolve and each of these is about recording a new video for my channel, so let's say we want to do something after each recording the three videos and we want to record running all of these in parallel at the same time so we don't have to worry about waiting for one before starting the next one, we can use what's called promised, so we just say promised and inside here we send it. in a series of all the different promises that we want to execute, so in our case we want to record video one, we want to record video two and we want to record video three as well and the promise doll will execute each of these. promise and as soon as it's done, it will call the dot Ben and dot catch methods depending on whether they resolved or failed, so in our case all of these will resolve, so we'll use a dot come and this dot Ben.

It's going to send an array of all the successful messages, so it's going to send us an array with all these different parameters resolved, so we're going to have a message here and this message is just going to be an array that we're just going to print to the screen, so we will print messages and if we say that, you will see that we have video one recorded, video two recorded and video three recorded in this array here, which is exactly perfect, that means that all of our promises were executed and they all came back and as soon as finished, this dot come method was called and you can't really see that with this example, but they're all running at exactly the same time, so for this one, for example, it took a long time. time and I really needed to call the database for example and get some results, it will run at the same time as these other two, so if these other two are too fast, they won't have to wait for the first one to finish and now let's say we want to do something as soon as one of my videos finishes completing, we can use the promised app race instead of the promised points race and the promised points race is the same as the promised except it will come back so soon. as the first one completes instead of waiting for everything to complete and because of that it will only return one message at the point, unlike all messages, now if we run the promised run you will notice that we are only getting a return value that it's the video one recorded and that's like you expect video one to be the first time you recorded it and that's just because they're so simple you'll always run them in the same order and that's all there is to it to create .

Promises in JavaScript are extremely simple once you understand the concepts of resolution versus rejection and are very similar to callbacks that you probably already know from using JavaScript before, so if you enjoyed this video, be sure to subscribe to my channel to watch more videos like this. and check out my other

javascript

es6 related videos here. Thank you all so much for watching and have a nice day.