Asynchronous JavaScript #3 - Callback Functions

co-signing guys welcome to your third asynchronous JavaScript tutorial and in this video we're going to dive right into callback functions Wow all right there so callbacks are pretty abundant in JavaScript and chances are you've probably been using them already in your code but just to go through the basics again what I'm going to do is a simple example so I'll create a variable and I'm going to call this fruits and this is just going to be set equal to an array of fruits so we'll say banana apple maybe and then pear okay so now what I want to do is use a full reach method to cycle through each one of these so I'll say fruits dots for each and then right in here what we're going to do is pass this a function and that there my friend is a callback function so we have an array of fruits which for each cycles through and as a parameter for this for each method we pass in this callback function and that callback function can do something with whatever data is passed to it in this case is passed the value of whichever array pocket we're up to in the for each cycle so we'll just put in an owl and we'll say console.log if I can spell it without right so now we should see those values output there to the console banana apple and pet so in a nutshell a callback is just a function which is provided as a parameter to our other methods such as for each and it is invoked at a certain point in time now this callback is declared in line which basically means we've written all of the code for this function inside these parentheses right here as a parameter but they don't have to be like that what we could do instead is get rid of that we can declare our function first of all like this and give it a name we'll say callback and then right in here we can just say call that like so and this will do exactly the same thing so it still logs those out to the console so this is asynchronous callback meaning it happens right away before the function returns and I can just demonstrate that by the login something right here to the console I'll say console dot log do it and then press save and now we get done after all this happens so this callback function is called synchronously okay it doesn't call it at a later point in time which would be asynchronous it calls it straight away does all that stuff first and then it moves on down the thread to the next thing which is this console dot log message done okay so this is a synchronous callback but we want to take a look at asynchronous JavaScript and what happens with callbacks then and remember the byline of asynchronous JavaScript is something which can start now and then finish up later so if we take a look at an asynchronous example let me just get rid of all this where we go out and retrieve some data so I'll say jQuery don't get and this is the method we used in the last tutorial where we go out and grab some data using jQuery get method going to pass in the path to the data I want which is data forward slash tweeks dot JSON and that's that file right there that we saw in the last tutorial which is just a dead simple JSON file okay and then we pass through our callback function or right here like so and then all we're going to do is pass through the data into that callback function that this retrieves for us okay and then all we're going to do is console dot log that data right so now this is an asynchronous callback function so remember asynchronous means something can start now and then finish later so the start now is this part right here where it goes out it passes this request to a thread outside of JavaScript to go and get that data and bring it back okay and then when the data eventually does get back this is the later part okay it does this callback function so this is an asynchronous callback function it doesn't happen right away and you can see that object logged to the console right there thought then console.log just a test message we're going to see hopefully this test appeared first that's because this is an asynchronous callback it happens at a later point in time so when we've done with the first part of this when it goes out tries to request it while that's going on it frees up the JavaScript thread to carry on down the code console.log this test message first of all then the callback function is called at a later point in time where it logs this to the console so that is an asynchronous callback and same again this is an inline callback function we don't have to do it like that we can say something like this we'll just call it CB for callback and then declare this callback function or right up here function CB and then this will work exactly the same so we're just preparing this callback function in advance so this is all fine board when we need to use a lot of asynchronous code if we're not very careful with how we structure these callbacks then pretty soon it can become a nightmare to work with and you've probably heard of something called callback hell which is where we've got call back after call back after caller and it is crazy you just want to bang your head against the wall when you get called like that to work with so what I'm going to do is show you what that looks like and then I'm going to show you a way we can kind of tidy that up a little bit all right so let's just get rid of all this trick first of all and what I want to do is make three Ajax requests I've got three files right here in the data folder I've got like tweets Jatin but I've also got friends JSON and videos Jason they're all dead simple JSON files and what I want to do is go out and grab each one of these in turn so first of all I want to go out and grab this tweets JSON file then when that data is retrieved and brought back to us I want to fire a callback function and inside that callback function then I want to go out and grab the friends JSON file then when that data is retrieved rub back to us we find the callback function from that request and only then do I want to go out and grab the final JSON file which is this really oh stop Jason all right so we're doing it in order one at a time not all at the same time so to demonstrate this and want to use a different method using jQuery I'm no longer going to use get switch so in the last tutorial I'm going to use a Jack's and the reason I want to do that is because I want to show you guys and it's got some different options we can pass through to it so let's say jQuery AJAX and then in the parenthesis we pass through an object and in this object is where we specify some different options for this request and the first option is going to be the type of requests that we make and that is going to be a get request the second option is going to be the URL and this is the URL of data we know that's in the data folder follow slash tweets JSON okay and the third one is the success now this is to say what happens on success of this request if we go out successfully grab that data and it returns what do we want to do well we want to fight a callback function so we pass through a callback function to this success property and inside the callback function we can pass through that data that is retrieved and then we can work with that data so we're going to come back to that in a second but finally I want to show you this it is the error so if there's an error with our request what do we want to do then well I want to find a different function and in this function we can pass through three things the first thing is the jQuery xhr object the second one is the text status of the error and the third one is the error itself so inside here we can just do something like console dot log error and this isn't how you would handle your errors but you know this is not what we're focusing on right now you'd handle your errors in a different way okay so inside this callback function now we've successfully got those tweets what do we want to do well first of all I want to log that data to the console like that and then once I know we've safely got the first lot of data this tweets Jason then I want to go out and grab this friends Jason so we can do another Ajax request but instead of writing it all out again what I'm going to do is just copy this dude right here and paste it in underneath so let's do that and this time we want to change this to friends JSON and then that is all fine so what we're doing is first of all we've gone out grabbing the tweets when it's returned to we're firing this first callback function where we're logging the data to the console and then were performing a second a chat request we're inside this we're going after the friends JSON once that is retrieved and brought back to us were firing this second callback function where we're logging predicta to the console and we have our error functions right there as well just in case there's an error with either one okay so third I want to fire this third caller this third Ajax request where we're going out and we're grabbing the video stock JSON all right so this only happens after we first of all got the tweets then after we've got their friends and this second callback function is fired so in here we're making this third Ajax request to go out and grab the videos JSON and it's going to log that data to the console as well all right so let's save this and take a look and everything it should work yep first we get the tweets then the friends then the videos alright cool except it's not cool because this looks like an absolute nightmare to work with this is callback he'll call back after call back after call back and also you can see this triangle of death right here eating into our code this is not what we want our JavaScript to look like so how can we make this a little better and by the way the reason is so hard to work with it is because we've got error handlers all over the place we've got errors at the bottom for things at the top and if you were trying to debug this the deeper this triangle of death gets the harder it's going to be to work with so what we want to do is kind of separate this out a little bit so fortunately we can do that and we're going to do two things the first thing I'm going to do is separate out these error functions right here okay so what I'm going to do is prepare in advance right up here and error handle a function so we'll save function handle error and then it's going to take these three things so I'm just going to copy those and paste them a right up here inside those parentheses and then inside here we're going to do the same thing we're just going to log to the console the error okay cool so now what we can do is instead of defined in defining this function right here on every error we can just put instead the name of function which was handle error okay cool same thing here handle error and the same thing right here handle error okay so that looks a little bit better now but we still have this triangle of death eating into our code so we want to get rid of that as well so what else can we do well right here you can see this first Ajax request has this callback function on success and all of this function is everything up until this error right so we can cut all that out and then what we can do is paste that down here in its own separate function its own separate call back function and we can call this something like call back tweets okay so what we're doing is we're going to call that all right there and then on success of this first Ajax request we're going to call this callback function call back tweets and it's going to fire the second Ajax request okay so now we've separated that first callback function and this triangle now looks a little smaller but we can make it better still what we can do now is get this second callback function so when we make the second request right here going after this data once it's returned towards we're making this second callback function which is all of this stuff right up until this error right here so we can get rid of all that and by the way you want to get rid of that comment as well and then we can paste this down here get rid of the comment again and this time we'll call this function CB and its friends so this is the callback function for the friends and right here we can say CB friends instead so now when we successfully make this request and the data is returned to us we call this callback function which is defined outside as well which is right here and yet we could do the same with the third callback function but because this is so small we really don't need it but now if you take a look at the code we no longer have that triangle of death eating into it and if it just zoom out a little bit so you can see more of it then you can see this looks like more kind of synchronous code we're doing one thing at a time after another we're not going into the code we going downwards okay so this is a better way to kind of our callbacks and avoid callback how a little bit but again I'm still not a massive fan of this because it still looks a little bit complex for just basically doing three things three requests and so there is a better way of dealing with these asynchronous Ajax requests and that's by using what's known as promises and we're going to take a look at promises in the very next tutorial so any questions leave those down below otherwise guys don't forget to share subscribe and like and I'll see you in a very next tutorial

Channel: The Net Ninja

Views: 112,494

Keywords: asynchronous javascript, asynchronous javascript and xml, javascript asynchronous code, asynchronous javascript tutorial, ajax tutorial, ajax, ajax tutorial for beginners, asynchronous vs synchronous javascript, ajax tutorials, introduction to ajax, ajax introduction, what is ajax, what is asynchronous javascript, callbacks, javascript callback functions, callback hell, js callbacks, ajax callbacks, javascript callbacks, tutorial

Id: QRq2zMHlBz4

Length: 13min 49sec (829 seconds)

Published: Tue May 03 2016