1 00:00:00,990 --> 00:00:02,640 ‫So to finish this section, 2 00:00:02,640 --> 00:00:04,020 ‫we're quickly gonna review 3 00:00:04,020 --> 00:00:07,290 ‫how we can use asynchronous JavaScript techniques 4 00:00:07,290 --> 00:00:09,390 ‫in order to fetch data. 5 00:00:09,390 --> 00:00:13,650 ‫So, to load data from an external web API. 6 00:00:13,650 --> 00:00:15,750 ‫And the first way in which we're going 7 00:00:15,750 --> 00:00:19,983 ‫to do this is to directly use the concept of promises. 8 00:00:21,360 --> 00:00:24,810 ‫And let's start by deactivating all this code 9 00:00:24,810 --> 00:00:26,163 ‫that we no longer need. 10 00:00:27,330 --> 00:00:30,390 ‫So now we're actually going to leave this domain 11 00:00:30,390 --> 00:00:33,780 ‫of books and we'll just focus quickly here 12 00:00:33,780 --> 00:00:35,583 ‫on something entirely different. 13 00:00:36,510 --> 00:00:40,590 ‫So, in order to fetch data from an API in the browsers 14 00:00:40,590 --> 00:00:43,503 ‫we have the so-called fetch API. 15 00:00:44,340 --> 00:00:47,010 ‫So a function that is called fetch 16 00:00:47,010 --> 00:00:51,330 ‫and into which we can pass a URL of an API. 17 00:00:51,330 --> 00:00:53,520 ‫And let's actually use a kind 18 00:00:53,520 --> 00:00:58,520 ‫of dummy API that you commonly see in tutorials. 19 00:00:58,830 --> 00:01:02,587 ‫That's the JSONPlaceholder API. 20 00:01:05,250 --> 00:01:06,663 ‫Yes, it doesn't matter. 21 00:01:07,530 --> 00:01:10,503 ‫So just Google this JSONPlaceholder. 22 00:01:11,490 --> 00:01:12,323 ‫All right. 23 00:01:12,323 --> 00:01:15,750 ‫And then open up this, this page. 24 00:01:15,750 --> 00:01:18,723 ‫And then we can just copy this URL right here. 25 00:01:19,800 --> 00:01:22,350 ‫So slash to-dos, but without the one. 26 00:01:22,350 --> 00:01:23,970 ‫So that's not necessary. 27 00:01:23,970 --> 00:01:25,920 ‫And immediately here you also see 28 00:01:25,920 --> 00:01:28,383 ‫that they're using the fetch function, right? 29 00:01:29,580 --> 00:01:30,750 ‫So let's create a new string 30 00:01:30,750 --> 00:01:34,680 ‫like this and then paste in that URL. 31 00:01:34,680 --> 00:01:38,910 ‫Now, in order for this to actually work in Qokka right here 32 00:01:38,910 --> 00:01:41,100 ‫you need at least Version 18 33 00:01:41,100 --> 00:01:44,160 ‫of Node.js installed on your computer. 34 00:01:44,160 --> 00:01:47,940 ‫So if you didn't do that previously when I mentioned 35 00:01:47,940 --> 00:01:50,130 ‫that you should use Version 18 36 00:01:50,130 --> 00:01:54,630 ‫then this is a good time to update your Node.js version. 37 00:01:54,630 --> 00:01:57,600 ‫Cause Qokka here actually isn't using a browser, 38 00:01:57,600 --> 00:01:59,520 ‫but it is using Node.js. 39 00:01:59,520 --> 00:02:03,903 ‫And the fetch function was only added to Node in Version 18. 40 00:02:05,130 --> 00:02:07,080 ‫Okay? But, anyway, 41 00:02:07,080 --> 00:02:11,190 ‫what is going to happen here when this function gets caught? 42 00:02:11,190 --> 00:02:14,670 ‫Because fetching the data from this API here, 43 00:02:14,670 --> 00:02:18,990 ‫so from this string, will of course take some time. 44 00:02:18,990 --> 00:02:22,410 ‫Because JavaScript needs to do an HTTP request, 45 00:02:22,410 --> 00:02:25,830 ‫needs to wait until that request is processed, 46 00:02:25,830 --> 00:02:29,250 ‫and then it needs to download that data basically 47 00:02:29,250 --> 00:02:30,630 ‫from this server. 48 00:02:30,630 --> 00:02:34,770 ‫And so, in the meantime, JavaScript actually keeps running. 49 00:02:34,770 --> 00:02:37,263 ‫So if we lock something to the console here, 50 00:02:40,530 --> 00:02:42,390 ‫Jonas, for example, 51 00:02:42,390 --> 00:02:44,790 ‫it will get executed immediately. 52 00:02:44,790 --> 00:02:49,230 ‫So JavaScript will not wait until this data is fetched. 53 00:02:49,230 --> 00:02:51,090 ‫It will simply execute as function 54 00:02:51,090 --> 00:02:54,960 ‫and will then immediately move on to the next line of code, 55 00:02:54,960 --> 00:02:57,390 ‫which in this case is this one. 56 00:02:57,390 --> 00:03:01,530 ‫So, how do we basically wait for this code here 57 00:03:01,530 --> 00:03:05,250 ‫and do something as soon as the data has arrived? 58 00:03:05,250 --> 00:03:08,850 ‫Well, that's where the asynchronous JavaScript techniques 59 00:03:08,850 --> 00:03:10,410 ‫come into play. 60 00:03:10,410 --> 00:03:14,280 ‫So, this fetch function here, what it returns immediately, 61 00:03:14,280 --> 00:03:19,230 ‫and then moving on to the next line, is a so-called promise, 62 00:03:19,230 --> 00:03:24,033 ‫and we should be able to see that with a consular log here. 63 00:03:25,380 --> 00:03:26,340 ‫Let's see. 64 00:03:26,340 --> 00:03:29,880 ‫And indeed, so this is a so-called promise 65 00:03:29,880 --> 00:03:32,730 ‫and it says here that it's pending because that's one 66 00:03:32,730 --> 00:03:36,360 ‫of the multiple states in which a promise can be. 67 00:03:36,360 --> 00:03:39,360 ‫So it can be pending when it's still doing something 68 00:03:39,360 --> 00:03:40,560 ‫in the background. 69 00:03:40,560 --> 00:03:44,670 ‫It can be rejected if there was an error. In this case, 70 00:03:44,670 --> 00:03:47,190 ‫if there was an error fetching this data, 71 00:03:47,190 --> 00:03:48,570 ‫or it can be fulfilled, 72 00:03:48,570 --> 00:03:52,140 ‫which means that the data successfully arrived. 73 00:03:52,140 --> 00:03:54,180 ‫And once again, I will not go deeply 74 00:03:54,180 --> 00:03:55,650 ‫into the details here. 75 00:03:55,650 --> 00:03:57,180 ‫For that you can go ahead 76 00:03:57,180 --> 00:04:00,600 ‫and read the promise documentation on MDN, 77 00:04:00,600 --> 00:04:02,820 ‫or you can watch some YouTube video, 78 00:04:02,820 --> 00:04:04,620 ‫or you can of course also 79 00:04:04,620 --> 00:04:07,080 ‫check out my complete JavaScript course. 80 00:04:07,080 --> 00:04:09,840 ‫But, anyway, the promise state that we are interested 81 00:04:09,840 --> 00:04:13,440 ‫in here is the fulfilled state, right? 82 00:04:13,440 --> 00:04:16,800 ‫So, that's the state where the data has actually arrived, 83 00:04:16,800 --> 00:04:18,810 ‫and we can handle that state 84 00:04:18,810 --> 00:04:23,433 ‫by using or by adding the then method. 85 00:04:24,300 --> 00:04:29,300 ‫So let's of course first get rid of this console.log, 86 00:04:29,400 --> 00:04:33,450 ‫and so then, again, this returns a promise, 87 00:04:33,450 --> 00:04:37,200 ‫and on a promise we can call the then method. 88 00:04:37,200 --> 00:04:40,410 ‫And so the then method will basically be called as soon 89 00:04:40,410 --> 00:04:42,300 ‫as the promise is fulfilled. 90 00:04:42,300 --> 00:04:46,710 ‫So, as soon as it successfully got back with the data. 91 00:04:46,710 --> 00:04:49,350 ‫Now promises are used for more than data fetching, 92 00:04:49,350 --> 00:04:51,900 ‫but here I'm just using that as an example. 93 00:04:51,900 --> 00:04:53,130 ‫Okay? 94 00:04:53,130 --> 00:04:54,540 ‫Now into this then method 95 00:04:54,540 --> 00:04:56,820 ‫we need to pass in a callback function, 96 00:04:56,820 --> 00:04:59,190 ‫which is basically the code that will then 97 00:04:59,190 --> 00:05:02,283 ‫be executed as soon as the data has arrived. 98 00:05:03,810 --> 00:05:08,073 ‫So, JavaScript will call this callback function here 99 00:05:08,073 --> 00:05:10,740 ‫with the response that it has received. 100 00:05:10,740 --> 00:05:13,230 ‫So that's why I like to call this here res, 101 00:05:13,230 --> 00:05:15,480 ‫and this data then needs to be converted 102 00:05:15,480 --> 00:05:18,840 ‫from json to a JavaScript object. 103 00:05:18,840 --> 00:05:21,632 ‫So again, not going deep into it here, 104 00:05:21,632 --> 00:05:25,653 ‫here it just needs to be res.json. 105 00:05:27,330 --> 00:05:28,260 ‫Okay? 106 00:05:28,260 --> 00:05:29,250 ‫And now the thing is 107 00:05:29,250 --> 00:05:33,780 ‫that actually doing so will return another promise. 108 00:05:33,780 --> 00:05:37,200 ‫So, this dot json here also takes some time, 109 00:05:37,200 --> 00:05:39,960 ‫so it's also an asynchronous operation 110 00:05:39,960 --> 00:05:42,753 ‫and therefore, here we need to add another then. 111 00:05:45,390 --> 00:05:46,710 ‫Okay? 112 00:05:46,710 --> 00:05:50,310 ‫But then here we already have our final data 113 00:05:50,310 --> 00:05:52,950 ‫in the JavaScript form. 114 00:05:52,950 --> 00:05:56,100 ‫And so, this function here will then get caught 115 00:05:56,100 --> 00:05:58,110 ‫with the result of this previous function 116 00:05:58,110 --> 00:05:59,400 ‫which is then the data. 117 00:05:59,400 --> 00:06:01,290 ‫So let's simply lock this data then 118 00:06:01,290 --> 00:06:03,303 ‫to the console at this point. 119 00:06:04,950 --> 00:06:06,030 ‫So let's see. 120 00:06:06,030 --> 00:06:09,183 ‫And indeed, here we got the to-do's. 121 00:06:10,680 --> 00:06:12,960 ‫So there's a lot of them. 122 00:06:12,960 --> 00:06:16,440 ‫All of them came through the JASONPlaceholder API. 123 00:06:16,440 --> 00:06:18,030 ‫Now what you notice here again 124 00:06:18,030 --> 00:06:21,390 ‫is that it first printed Jonas to the console. 125 00:06:21,390 --> 00:06:26,390 ‫So the result of this, and only later is when this array 126 00:06:26,970 --> 00:06:31,140 ‫of to-do objects was finally printed to the console as well. 127 00:06:31,140 --> 00:06:34,053 ‫And again, that's because this data arrived later. 128 00:06:35,010 --> 00:06:38,730 ‫So what happened here was that, as I mentioned before 129 00:06:38,730 --> 00:06:42,960 ‫is that this fetch function fired off a request to the API, 130 00:06:42,960 --> 00:06:46,440 ‫and then immediately JavaScript moved on to the next line, 131 00:06:46,440 --> 00:06:49,110 ‫which is this one here, where it simply, basically 132 00:06:49,110 --> 00:06:52,680 ‫registered dysfunction here to be executed later. 133 00:06:52,680 --> 00:06:55,620 ‫The same here, but then it immediately executed 134 00:06:55,620 --> 00:06:58,170 ‫this line of code, right? 135 00:06:58,170 --> 00:06:59,460 ‫Then some time passed 136 00:06:59,460 --> 00:07:01,890 ‫and then the data from the IPI arrived. 137 00:07:01,890 --> 00:07:05,160 ‫And so then, JavaScript goes back here 138 00:07:05,160 --> 00:07:07,143 ‫and executes this callback function 139 00:07:07,143 --> 00:07:09,180 ‫that we had registered before. 140 00:07:09,180 --> 00:07:11,760 ‫And so this is where the response arrives. 141 00:07:11,760 --> 00:07:15,420 ‫It's converted to JSON, and then here we receive the data 142 00:07:15,420 --> 00:07:18,810 ‫in this callback function and log it to the console. 143 00:07:18,810 --> 00:07:21,060 ‫So literally, JavaScript will wait 144 00:07:21,060 --> 00:07:23,820 ‫until it executes these functions here, 145 00:07:23,820 --> 00:07:26,670 ‫which is usually not how JavaScript works. 146 00:07:26,670 --> 00:07:30,210 ‫But here we are using asynchronous JavaScript 147 00:07:30,210 --> 00:07:33,660 ‫while usually JavaScript is a synchronous language 148 00:07:33,660 --> 00:07:37,950 ‫where one line of code is simply executed after the other. 149 00:07:37,950 --> 00:07:40,320 ‫Now, okay, and here now at this point 150 00:07:40,320 --> 00:07:42,780 ‫you could do something a bit more meaningful. 151 00:07:42,780 --> 00:07:44,130 ‫For example, in React, 152 00:07:44,130 --> 00:07:48,060 ‫we would then typically take this data and set some state 153 00:07:48,060 --> 00:07:52,740 ‫which would then get reflected right in the user interface, 154 00:07:52,740 --> 00:07:55,320 ‫but of course more about that later. 155 00:07:55,320 --> 00:07:58,950 ‫For now, I just wanted to basically show you, 156 00:07:58,950 --> 00:08:02,910 ‫or to review how we use these promise methods here 157 00:08:02,910 --> 00:08:06,420 ‫in order to successfully handle the moment when 158 00:08:06,420 --> 00:08:08,403 ‫the data arrives from the API.