Converting Callback Functions to Promises

all right so today what i want to talk about is how you can turn your callback functions into promise based functions so i'm going to show you how you can do this and then i'm going to explain why you would want to do this so i have a simple page here with one button on it when i click on it what i'm going to do is wait for three seconds and then it's going to change the color so that's my delay function all it does is change this but creating a delay in your code is something that's used fairly often so i'm going to use that as the basis for this discussion all right now i've got one script here main.js it's a module i'm importing that and then i'm going to import my utility script here and this is my delay function so all it does is it accepts two things a function and then an optional parameter for the number of seconds that you want to delay this can be an integer it can be a decimal number it's going to take that number multiply by a thousand use settimeout when the set timeout is done it's going to call whatever function you passed in simple thing gets used quite a bit in my code what i'm doing is i've got the click listener on the button i'm going to call my function weight i've got my delay set to be three seconds so just have a variable here this is how long i want to wait three seconds and then i call delay which is the function from my utility page right here this utility script so i'm calling that and i'm passing in this function right here and it's going to call my change button color so this one right here i'm going to generate a random color it's a random hex value that's the one that's being written out here i find the button i change this background color i write the message out in here and then i'm going to return a random number between 1 and 4. the reason that i'm returning this number is i want to be able to do this more than once and this is getting into the reason why you would want to change a callback into a promise so here i am doing a delay and then calling the function to change the background color fair enough and i can call it again and again and again the problem is if i write a whole bunch of them in a row here it's going to start all of them running at the same time so if the third one has less of a delay than the first one it's the one that's actually going to fire first i want to have a chain happening so i call this function it changes the color and then i'm going to create a brand new delay so right after doing this i'm going to call delay again [Music] and again i have to pass in a function and then i have to pass in a delay well the delay is going to be the number that came back from here so this delay 2 that's going to be my delay for the second one inside of here we're going to call that change button color again [Music] like this it's going to give me a new amount to delay and then we can delay by that amount once again so delay three is going to be the amount that we delay before we do whatever's inside of here and you can see my code looks a lot like the set timeout function set timeout function we give it a function which is a callback so my code looks the same but to create the chain of one then the next then the next and the next what i'm stuck with is this ugly nesting and this is what people refer to as callback hell because i have all of these functions that i want to happen in a sequence i'm stuck having to nest one inside the other and it just gets to be difficult so this will work come back in here and i'll click one time and then it's going to run the once after the three seconds and then again after a random delay and again after a random delay so three times this thing has run if i click again then it's going to happen three more times the first one is three seconds and then i've got random delays for the second and third time that it's changing the color and the random number can be up to four seconds so it's just a little bit delayed here okay so with these changes what we want to do is instead of having to deal with all this nesting what we want to do is turn that into a promise so i'm going to change my import here i'm not going to use this [Music] i've got another script just so i can keep the original script so you'll have a copy of it and i'm also going to comment out all of this right here what i want to do is i want to use a promise i want to be able to do something along the lines of this i want to call my function i want to pass whatever my delay amount is into that function and then after it's done something like this [Music] and we can put a catch on the end to handle any errors that are going to happen there we go now this yeah i'm getting an error because i we haven't written the script yet but this syntax is going to be much easier and then if i want to create a whole bunch of them well i can just have a whole bunch of thens chained together now this is going to return to us a number so i want to be able to keep that number so i can use it a little bit later so i will instead of just passing in the name of the function i will put it inside of a function and say okay call this function whatever the return value is will automatically get passed to the next then [Music] all right so let's jump into our script here this is what the original one was i just copied that over and had it in the comments so this is the original our new version that we're going to use starts off looking fairly similar and i mean in terms of the amount of code it's going to be pretty similar so i have a function there we are so the first line and the last line almost the same except i'm not passing the function in i'm not using a callback my function gets called inside the subsequent then back here it's inside the then this is where i put the function so i have them all here i don't have to take a function and pass it off to the other script i'm going to have it written right here so it's a little bit cleaner for me to read and understand what's going on okay inside of here what we do is we return a promise by returning a promise that's how we get this then then then catch chain started inside of here it'll be resolve and reject function whenever we want it to return and go to the next then we use the method resolve so this one right here resolve when we call that that's when it goes back to the to the function that called it right here when resolve gets called that's when we go down to the then so right inside of here we'll do the same thing that we were doing before we'll say set timeout and my function that i'm going to call is resolve and then the same as we did right up here i'll take the number of seconds multiply by a thousand and that is the number of milliseconds for my delay okay so very similar amount of code i'm not really gaining a lot of readability or anything in just this area looking at these two things side by side not a huge amount of difference but for myself when i use this utility function that i've built in here okay this is going to work i'll run it once just to check and make sure everything's good we're going to get one delay when we click on the button it's going to change one time after those three seconds there we go works fine but now the advantage really comes is in reusing this if i wanted to use my delay in a chain if there's multiple things that i want to do here so i can say i'm going to do a whole bunch of things in a row like this these could be anything that i want but it improves the readability instead of nesting this and trying to figure out okay where's the starting and the ending curly braces it's very easy top to bottom reading through this list now remember the return value from our change button color that gets passed into the next then and the return value of that function is the new delay so i don't have to declare variables here to get the values and then pass them along i'll just have a function in here where we take whatever that delay is we'll use d for the delay and we're going to call the delay function again and pass that number in this is going to return a promise which will get used in the next then where i can see again i'm going to call my change button color function it's going to return to me a new delay which i can use to create another delay and then i can do it a third time here [Music] like this and i'm not actually using the delay number that's returned from here but that's fine i'm just throwing it away but i can still run this thing three times do a delay then call this then get another delay then call this then get another delay then call this and just the general readability on a function like this is much better so here we click one time one two three the first time it gets called and then there's another delay it gets called again and another delay and then it gets called so now what we've done is we've turned something that was a callback function into a promise based function and we get the benefit of this improved readability now you can do async and await if this was inside of a function that you marked as async we could do a wait for each one of these things but here's our new version so all of this code is linked to down in the description and if you are interested in learning a little bit more seeing another practical example of this i did do an article on dev.2 about this same idea in this article i used the geolocation function the built-in navigator.geolocation.getcurrentposition i took that and i converted that into a promised based solution so feel free to have a look at that as well hope that helps you out hope that helps you understand a little bit more about callbacks versus promises if you have any questions feel free to leave them in the comments i answer whatever time for and as always thanks for watching

Channel: Steve Griffith - Prof3ssorSt3v3

Views: 2,192

Rating: 5 out of 5

Keywords: MAD9013, MAD9014, MAD9022, web development, JavaScript, JS, CSS, HTML, steve flix, steveflix, web dev, professor Steve, prof3ssorSt3v3, 100daysofcode, promises, es6, esnext, es 6, es next, callbacks, callback functions, delay function, delay promise

Id: DxWqsNMccHY

Length: 12min 34sec (754 seconds)

Published: Thu May 27 2021