Transcript

          So then we've seen how to use promises now to manage our network requests and our functions that fire

when the requests are complete, either resolved or rejected.

Now, one of the best things about promises is that we can chain them together so we can perform one

asynchronous task after another in order should we need to.

Now we've seen how to do that using callbacks which results in messy, deeply nested code.

Chaining promises gives us a much cleaner and easier way to do it.

So what I'm doing here is first of all, calling get to do's.

Once we're getting these to do's, then when we call the resolve function up here, it's firing this

function in the then method.

And if we get an error, it fires this function in the catch method.

So remember, we want to get this data sequentially.

So we know down here when we fire this function in the then method that we've already got the first

lot of data and this would be a safe position now if we wanted to do this sequentially to go out and

try and get the next lot of data.

So what I could do here is say get to do's again and then this time we want Mario.

So we'll say to do's forward slash Mario dot Jason and this returns a promise.

Now we could tack on the dot then method there and fire a function in here that takes the data.

But that kind of defeats the whole point of promise chaining.

Instead, what I'm going to do because this thing here returns a promise, what I'm going to do is say

in front of that return.

And what that means is that the parents of this thing right here, the whole thing now has a return

value of a promise, this thing.

So since this returns a promise now, I can tack on the dot then method again at the end so I can say

dot then and pass a function in here.

And this function will fire when this one is complete so we can pass through the data in here and delete

those parentheses.

And then in here we can say console dot log and I'll say promise to resolved and output the data.

And up here I'll say promise one resolved.

So what we're doing is going out, we're getting the first lot of to do's and we're getting this callback

function which runs.

When we have those, we're logging them to the console.

Then we're returning this request right here, which returns a promise to the whole thing because we're

calling return right here.

So now this whole thing returns the promise that we get back from this.

And since this all returns, that promise, we can just tack on Dot then to this.

And so this function is going to fire when this request is done and we have data.

Now, if we get an error in the second request, the good thing about the catch at the end is that it

catches any error.

So we don't have to rewrite this for every dot.

Then we just have one catch at the end and one function that runs for any error.

So that's nice.

So now we have this second lot of data and if I save it now we can see over here that we actually get

an error and it says error getting resource.

So let's see what's gone wrong.

And that's because we still have s on the end of the widget.

If I save it now and refresh now we can see we have promise one resolved, then promise two and they

both have the correct data.

So then let's do this again.

We want to get the next lot of data.

Once we have this data so we can say again, return, get to do's and this time pass in two do's forward

slash Sean dot Jason And then since we're returning that, this whole thing is now returning that promise

so we can tack on another dot then method right here and inside we do another callback function.

This takes the data from that request and then we can log it to the console console dot log and we'll

say promise three resolved and pass in the data.

So let's give this a whirl.

I'm going to save it and refresh.

And now we can see one, two and three and we have all of that data.

So this is still working all in order.

And notice now we don't have that big triangle eating into our code.

We don't get callback hell, and this looks a lot more logical one after another.

So that's one of the really nice things about promises.

The way we can chain them together like this.

Now I want to show you if we have an error anywhere.

So this is the third time we try to get data.

I'm going to make this an error by putting an S on the end.

This is still going to fire for that error.

So let me save it.

And we can see over here we get resolve for one, resolve for two.

Then we get promise rejected error, getting the resource.

So this works for any of these things right here, any request.

If we have a catch method on the end and we have a function which takes that error, it's going to fire

for any error in any one of these requests, which is really.

Really nice summer friends.

That is how we chain promises together.