Let's now learn how to chain promises in order
to also render the neighboring country,
of the initial country
that we give to the function.
And actually, we already have a small chain of promises
because of this JSON function.
And so here,
these two thens called and sequence
are basically already a small chain.
But anyway, in this lecture,
we will now take chaining to a new level
and actually chain together,
two sequential Ajax calls.
So just like before we first get data
about the country.
And so that's the part
that we already have here.
But then we also want to get the data
about the neighboring country.
And so again,
the second Ajax call depends on the data
from the first call.
And so they need to be done in sequence.
So let's simply modify what we already have here.
And so the second Ajax call basically needs
to happen here in
this then handler.
So as soon as we get the data,
then we need to get the neighbor country
and do the Ajax call for that one as well.
So let's get the neighbor and we already know
that it is at data zero at borders.
And then also the first one.
And just like before, let's say,
if there is no neighbor,
then return immediately.
And actually this is not going to work,
but nevermind about this for now.
So we will talk about error handling actually
in the next video.
Now here, there is some kind of problem.
Now we're missing the closing parenthesis here now.
Right?
But now there is no error.
And so let's do the second Ajax call.
And let me just get the URL
from up here.
So that's this one.
Now.Okay.
And so, we use again fetch
and then the URL.
So let's call it country two and
to your country one, all right.
Now, for now,
this is not going to do anything
because what we need to do now is
to actually return does new promise,
because then when we do that,
we will be able to chain a new then method
on the result of this then method.
All right.
So that's a bit similar to what we did here
with the JSON method,
which remember also returned to promise.
And so we return all of
that promise here,
and then we can chain a new then method on
to that as well.
Now, in the last lecture,
I actually oversimplified how things really work.
So actually the then method always returns a promise,
no matter if we actually return anything or not.
But if we do return a value,
then that value will become the fulfillment value
of the return promise.
So let me actually show that to you.
So instead of returning
this for now,
let me just return 23.
And so then when I chain a new then method here,
let's say data,
and then let's alert debt data.
Let's see.
And then indeed we get 23.
And so again,
that happens because whatever we return from
this promise here will become the fulfilled value
of the promise.
Okay?
So again, this year it returns a promise.
And so we can handle it using the then method
And to fulfill to value,
so the success value basically
of the promise will be the valued that
we return from this then method.
Right?
And so that is, this 23 here.
And so therefore in the next then method,
then the data here will be 23.
And of course this year must be 23.
Otherwise we cannot see that in effect.
But yeah, so it is 23 because this value is 23.
So again, this data that we receive here as an input
to dysfunction is the fulfilled value of the promise
that we're handling.
And so again,
that's this value 23,
that we are returning from
this then method here.
Okay.
But anyway, of course the same
is true for ah, promises.
And so by doing this,
so by returning this promise here,
then the fulfilled value
of the next then method will be fulfilled value of
this previous promise.
So of this one.
Okay.
So I know that sounds confusing,
but what you need to understand is that basically
this then method here returns in your promise until,
we can then one more time handle the success value
of that promise.
So one more time, I'm calling this
one now a response,
because here we are dealing with the fulfilled value
of a fetch promise.
And so that is a response.
And so therefore I like to call it like that.
And so here, one more time,
we need to call the JSON method and that
is pretty annoying,
but that's just how we have to do it.
And so here again,
the fulfilled value of the promise will become dart body.
So the data that is stored
in the body,
and then we can again, handle that.
So data like this
and then render country with data.
And then here again,
we pass in that CSS class for the neighbor.
Okay.
And that should already be it.
And indeed, here we go.
And if we try something else,
let's say Germany,
let's see what country we get
and it's Austria.
Okay.
But anyway,
let's just put it back to this one here and yeah,
that's actually it already.
So as you can see,
promises really
allow us to handle these complex asynchronous operations
with as many steps
as we want.
So right now we have four steps here, even,
but of course we could extend this as much
as we want.
So even if we wanted the neighbor of the neighbor
of the neighbor,
like 10 countries,
we could easily do this by chaining all these promises
one after another and all
without the callback hell.
So here, instead of the callback,
hell we have what we call a flat chain of promises.
And this one is again,
very easy to understand and to read.
So as a conclusion to this video and the previous one,
promises really,
are an incredibly powerful and elegant solution
to handle asynchronous code.
Now, just to finish,
I want to show you a pretty common mistake
that many beginners make,
which is to basically chain this then method directly
onto a new nested promise.
So as we know,
this one immediately returns a promise.
And so many beginners basically do this instead,
let me show it to you here.
So instead of returning the new promise,
they then chain theme then method right here.
So right inside of
this then method.
Now this actually does still work,
but then we are in fact back to callback hell.
Because now indeed,
we have one callback function here
defined inside of another one.
So inside of this,
in closing callback function.
Okay.
And so of course
that's exactly what we're trying to avoid.
And so don't do this.
So always return to promise
and then handle it outside by simply continuing
the chain like this.
Alright, but I hope that this
was already pretty obvious anyway,
from all the explanations that I gave you throughout
this lecture and the previous one.
But anyway,
let's now move on and actually handle errors because
that is also a pretty common scenario when we work
with promises and especially
with Ajax calls.