‫So to finish this section,
‫we're quickly gonna 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.
‫That's the JSONPlaceholder API.
‫Yes, it doesn't matter.
‫So just Google this JSONPlaceholder.
‫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're 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 Qokka right here
‫you need at least Version 18
‫of Node.js 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 Node.js version.
‫Cause Qokka here actually isn't using a browser,
‫but it is using Node.js.
‫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 caught?
‫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 lock 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 as 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 consular 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 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 MDN,
‫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.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 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 res,
‫and this data then needs to be converted
‫from json to a JavaScript object.
‫So again, not going deep into it here,
‫here it just needs to be res.json.
‫Okay?
‫And now the thing is
‫that actually doing so will return another promise.
‫So, this dot 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 caught
‫with the result of this previous function
‫which is then the data.
‫So let's simply lock this data then
‫to the console at this point.
‫So let's see.
‫And indeed, here we got the to-do's.
‫So there's a lot of them.
‫All of them came through the JASONPlaceholder 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 to-do 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 dysfunction here to be executed later.
‫The same here, but then it immediately executed
‫this line of code, right?
‫Then some time passed
‫and then the data from the IPI 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.
‫Now, 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.