All language subtitles for 14. Asynchronous JavaScript Promises

So to finish this section, we're quickly going to review how we can use asynchronous JavaScript techniques

in order to fetch data.

So to load data from an external web API.

And the first way in which we're going to do this is to directly use the concept of promises.

And let's start by deactivating all this code that we no longer need.

So now we're actually going to leave this domain of books and we'll just focus quickly here on something

entirely different.

So in order to fetch data from an API in the browsers, we have the so-called fetch API.

So a function that is called fetch and into which we can pass a URL of an API and let's actually use

a kind of dummy API that you commonly see in tutorials and that's the Json.

Place holder.

An API.

Yes.

It doesn't matter.

So just google this Json placeholder.

All right.

And then open up this this page, and then we can just copy this URL right here.

So slash to dos, but without the one.

So that's not necessary.

And immediately here you also see that they are using the fetch function.

Right?

So let's create a new string like this and then paste in that URL.

Now, in order for this to actually work in Quokka right here, you need at least version 18 of NodeJS

installed on your computer.

So if you didn't do that previously, when I mentioned that you should use version 18, then this is

a good time to update your NodeJS version because Quokka here actually isn't using a browser, but it

is using NodeJS, and the fetch function was only added to Node in version 18.

Okay.

But anyway, what is going to happen here when this function gets called?

Because fetching the data from this API here, so from this string will of course take some time because

JavaScript needs to do an Http request, needs to wait until that request is processed and then it needs

to download that data basically from this server.

And so in the meantime, JavaScript actually keeps running.

So if we log something to the console here.

Jonas, for example, it will get executed immediately.

So JavaScript will not wait until this data is fetched.

It will simply execute this function and will then immediately move on to the next line of code, which

in this case is this one.

So how do we basically wait for this code here and do something as soon as the data has arrived?

Well, that's where the asynchronous JavaScript techniques come into play.

So this fetch function here, what it returns immediately and then moving on to the next line is a so-called

promise.

And we should be able to see that with a console dot log here.

Let's see.

And indeed, so this is a so-called promise.

And it says here that it's pending because that's one of the multiple states in which a promise can

be.

So it can be pending when it's still doing something in the background.

It can be rejected.

If there was an error in this case, if there was an error fetching this data, or it can be fulfilled,

which means that the data is successfully arrived.

And once again, I will not go deeply into the details here For that, you can go ahead and read the

Promise documentation on mSDN, or you can watch some YouTube video or you can of course also check

out my complete JavaScript course.

But anyway, the promise state that we are interested in here is the fulfilled state, right?

So that's the state where the data has actually arrived and we can handle that state by using or by

adding the then method.

So let's, of course, first get rid of this console dot log.

And so then again, this returns a promise.

And on a promise we can call the then method.

And so the then method will basically be called as soon as the promise is fulfilled.

So as soon as it's successfully got back with the data.

Now promises are used for more than data fetching, but here I'm just using that as an example.

Okay.

Now into this then method we need to pass in a callback function, which is basically the code that

will then be executed as soon as the data has arrived.

So JavaScript will call this callback function here with the response that it has received.

So that's why I like to call this here Rez and this data then needs to be converted from Json to a JavaScript

object.

So again, not going deep into it here.

And here it just needs to be res dot Json.

Okay.

And now the thing is that actually doing so will return another promise.

So this Json here also takes some time.

So it's also an asynchronous operation and therefore here we need to add another then.

Okay.

But then here we already have our final data in the JavaScript form.

And so this function here will then get called with the result of this previous function, which is

then the data.

So let's simply log this data then to the console at this point.

So let's see.

And indeed, here we got the todos.

So there's a lot of them and all of them came through the Json placeholder API.

Now what you notice here again is that it first printed Jonas to the console.

So the result of this, and only later is when this array of todo objects was finally printed to the

console as well.

And again, that's because this data arrived later.

So what happened here was that, as I mentioned before, is that this fetch function fired off a request

to the API and then immediately JavaScript moved on to the next line, which is this one here, where

it simply basically registered this function here to be executed later, the same here, and then it

immediately executed this line of code.

Right?

Then some time passed and then the data from the API arrived.

And so then JavaScript goes back here and executes this callback function that we had registered before.

And so this is where the response arrives.

It's converted to Json and then here we receive the data in this callback function and log it to the

console.

So literally JavaScript will wait until it executes these functions here, which is usually not how

JavaScript works, but here we are using asynchronous JavaScript.

While usually JavaScript is a synchronous language where one line of code is simply executed after the

other.

Okay.

And here now at this point you could do something a bit more meaningful.

For example, in React, we would then typically take this data and set some state which would then

get reflected right in the user interface.

But of course more about that later.

For now, I just wanted to basically show you or to review how we use these promise methods here in

order to successfully handle the moment when the data arrives from the API.