Transcript

          Okay, then.

So far we're just calling get to Dos once and that is making this request once to get the to dos Json,

then logging 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 dos folder here and we have three lots of to dos once for Luigi, once

for Mario and ones 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 endpoint 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 going to go out and get the same one every time.

Instead, what I'm going to do is pass another parameter called resource into this get todos function.

Then I'm going to 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 todos whenever we call it.

So we'll do that.

So the first one we want to get is Luigi dot Json.

So I'm going to pass that in as our first argument.

We need to go into the Todos folder first of all, then Luigi dot 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 todos.

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 todos again because now we're going

to go out and get our second todos.

So this time we're going to go for the Mario todos.

So todos forward slash Mario dot Json and again, we need a callback function error data and inside

the callback function we'll do exactly the same thing.

Console dot, 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 ones.

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 todos again.

And the first argument is going to be todos folder forward slash Sean dot 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?

Quest 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.