Narrator: In this lecture,
we will learn how to consume a promise.
And in this case, we will consume the promise
that was returned by the fetch function.
So let's now implement the get country data function
from the very first lecture.
But of course, this one using a promise.
So get country data
and so again, here we pass in a country.
And then here, we will want this fetch function
and here again with the country then.
So making this a template literal again and then country.
And as we already know,
calling the fetch function like this,
will then immediately return a promise.
So as soon as we start the request
and in the beginning,
this promise is of course still pending
because the asynchronous task
of getting the data, is still running in the background.
So just as we learned in the last lecture.
Now, of course, at a certain point
the promise will then be settled and either in a fulfilled
or in a rejected state, but for now let's assume success.
So assume that the promise will be fulfilled
and that we have a value available to work with.
And so to handle this fulfilled state,
we can use the then method
that is available on all promises.
So just like this.
So again, this here will return a promise.
And on all promises, we can call the then method.
Now into the then method,
we need to pass a callback function
that we want to be executed
as soon as the promise is actually fulfilled.
So as soon as the result is available.
So a function and then this function
will actually receive one argument
once it's called by JavaScript
and that argument is the resulting value
of the fulfilled promise.
So let me call it response here
because this is the response of an AJAX call in this case.
All right, and that's it.
So this is how we actually handle a fulfilled promise,
but now let's actually do something with the response here.
And as always, I will start by logging it to the console.
But of course, we also need to call this function here.
All right, and so here we now get the response indeed.
And even the type of this object
is actually called response.
Let's just get rid of this here for a second
so we have a cleaner output here.
All right, and so here indeed,
we have a couple of things about the response itself,
for example, here to status code for the headers.
And so if you watch the lecture
about how the web actually works behind the scenes,
then this kind of data here will be familiar to you.
But anyway what we're actually interested in
is the data itself.
And so that data is in the response body here.
So let's click here just to see.
And as we see, the body is basically this readable stream.
All right, and so actually we cannot yet
really look at the data here.
So in order to be able to actually read
this data from the body,
we need to call the json method on the response.
Okay, so json is a method that is available
on all responses of the fetch method.
So what I mean is this, so response dot json.
So again, the json method here
is a method that is available
on all the response objects that is coming
from the fetch function,
so all of the resolved values,
and indeed this response here is in fact a resolved value.
And so therefore it does have
the json method attached to it.
Now, the problem here is
that this json function itself,
is actually also an asynchronous function.
And so what that means,
is that it will also return a new promise.
And that's all a bit confusing
and I really don't know why it was implemented like this,
but this is just how it works.
So anyway, what we need to do now here
is to actually return this promise from here.
Okay, because remember this here will be a new promise.
Okay, and so now we need to handle that promise as well.
All right, and so the way we do that
is to then call another then right here.
So we need another callback function,
this time let's call it data.
And for now let's log it here to the console
and let's give it a save, just to see if it worked.
And yeah, here it is.
So here we are back to having the same data
that we already had before,
but this time using a promise or actually two promises.
So let's recap what happened here.
And the first part here I think, is pretty straight forward
which is this fetch function here returning a promise.
And then we handled that promise
using the then method, right.
But then to actually read the data from the response,
we need to call the json method on that response object.
Now this itself will also return a promise.
And so if we then return that promise from this method
then basically all of this becomes a new promise itself.
And so since this is a promise
we can then again, call the then method on that.
And so then again we have a callback
and this time, we get access to the data
because the resolved value of this promise here
is going to be the data itself.
So basically the data that we're looking for,
which is then this one here, right.
And so now all we have to do
is render country of data zero, okay.
And so here it is.
So we just did the same thing as before, but using promises.
And if we didn't have all of these console dot logs here,
we could actually simplify this a lot.
So let me just copy it
so that we get to keep this version as well
but then we can create a highly simplified version as well.
So getting rid of this console dot log
and this one here, and then we can transform these here
to arrow functions.
And so this is gonna work because this one
will now implicitly return this result here.
So this promise and so then on that promise,
we can call another then method.
All I'm doing here is to simplify the code
that we already had before.
And you see that indeed, it still works.
So what do you think looks cleaner and nicer?
Is it this code here, using fetch and promises
or is this function that we wrote right in the beginning
with all of this weird stuff
that we have going on here
and with this event and listening for the event
and even worse here, with all these nested callbacks.
So I hope that you agree that this here,
is actually a lot nicer but beside being nicer,
the code is also easier to read and to reason about
and as I mentioned before,
that in itself is very important.
So it's very easy to understand that this fetches something
and then we get a response
which will be transformed to json.
And then we take that data
and render the country to the DOM.
Okay, so this almost reads like English sentences
and that's very helpful to understand the code now
and also in the future.
Now, just to finish you might be thinking,
well, we're using callbacks here, right.
And that is actually true.
So promises do not get rid of callbacks,
but they do in fact get rid of callback hell.
So even if this doesn't look like a big change for now,
it will look like a change
after we add the functionality
of loading the neighbor country
like we did in the previous lecture.
And so actually let's go do that now in the next lecture.