Asynchronous JavaScript Tutorial #6 - Callback Hell

Key Takeaways

okay then so far we're just calling get to do's once and that is making this request once to get the to dos.json then log in the data to the console but what if we have several files that we need to get one after the other so for example we have a to do's folder here and we have three lots of to-do's ones for luigi one's for mario and one's for sean so we have those three json files and what if we want to go out and get each one in turn and by in turn i mean we want to request the first one and we want to wait until we get the data back for that first one so that we can output it over here in the browser before we start to go and get the second one so once we've got the first one then we can start to make the request for the second one and we can output those to the browser and then when that's done we can go out and make the request for the third one so this idea of waiting until one request is done to go out and do another request is quite common when you're making requests to different apis often you might need to make a request to one api to get some data and then use that data to make a request to another api so we have to do them in turn so how would we do this when would we make a request for the second one and how do we know that the first one is done so that we can make a request for that second one well we know right here when the callback function fires at this point we know we have the data or an error but generally speaking we know we have the data at this point so this would be a good time to then go out and do our second request because we know the first one is complete so what i'll do first of all is i'm going to delete this right here this is the end point or the url that we're trying to get data from now if i call this function three times it's just going to go out and get this data three times which we don't have anymore what we want to do is replace this with these three files so i can't hard code this because then it's gonna go out and get the same one every time instead what i'm gonna do is pass another parameter called resource into this get to do's function then i'm gonna output that resource here as the second argument in open so what we need to do is pass through a resource which is the url to whatever we want to get into get to do's whenever we call it so we'll do that so the first one we want to get is luigi.json so i'm gonna pass that in as our first argument we need to go into the to do's folder first of all then luigi.json so that is our first argument which is resource up here and that will get output right here so it will make a request to get this thing right here now when it's done it's going to do all of this but for now i'm going to delete that error checking and i'm just going to output the data over here so this should be all of luigi's data let me save that and test it and we can see this which is all of luigi's to-do's so now now we have those we could maybe output them to the browser and then at that point because we now have the first one we can say okay now go and get the second one because remember we want to do these in order you don't always have to do them in order but if you want to do certain things in order then now we're in a safe position to do that so let's go down here and under the console log let's now say get to do's again because now we're going to go out and get our second to-do's so this time we're going to go for the mario to do's so to do is forward slash mario.json and again we need a callback function error data and inside the callback function we'll do exactly the same thing console.log the data okay so let's save that and preview now we get these luigi ones first then when it's done we go out and we get the mario buttons awesome so that's working so again now we can go out and we can get the sean ones inside this callback function so let's do that we'll call get to do's again and the first argument is going to be to-do's folder forward slash sean.json and the second parameter is going to be the callback function so error data and then open up the function inside we'll just console.log the data okay so let's preview this save it and check this out and we get three sets now we get luigi then we get mario then we get sean and it's all in order it's all working fine so then this is fine it's working and we're making sure that we get one lot of data before we move on to the next but this code is starting to look pretty messy and we can already see this triangle of doom eating away into our code now this is called callback hell nesting callback within callback within callback it doesn't look nice and if we added any more calls inside this it would start to very soon get very hard to maintain and read however sometimes we do need to wait for one lot of data before getting the next so how can we perform this kind of one request at a time methodology but in a nicer more readable way well to do that we can use something called promises and i'll go over those in the next lecture