1 00:00:02,150 --> 00:00:09,230 So we got started with HttpRequests, with this XMLHttpRequest object. By the way you might be wondering 2 00:00:09,230 --> 00:00:10,770 where the name is coming from, 3 00:00:11,030 --> 00:00:18,770 in the parsed, actually quite some time ago, this was basically introduced so we could fetch XML data behind 4 00:00:18,770 --> 00:00:19,630 the scenes. 5 00:00:19,700 --> 00:00:22,610 Nowadays of course it's more common to use JSON data, 6 00:00:22,670 --> 00:00:25,340 the name however still is the same. Now 7 00:00:25,370 --> 00:00:32,270 there is more you can do with it, more you can configure and you can dive deeper into XMLHttpRequest 8 00:00:32,280 --> 00:00:38,620 as you can actually dive deeper into almost all things you can do work with in Javascript. Attached 9 00:00:38,620 --> 00:00:42,020 you therefore find some resources that do allow you to dive deeper 10 00:00:42,110 --> 00:00:49,100 in case you're interested, now however I want to have a look at a more modern alternative which was added 11 00:00:49,100 --> 00:00:56,690 to browsers a few years ago and which actually is not supported in all browsers, especially older browsers, 12 00:00:56,870 --> 00:00:58,120 Internet Explorer 13 00:00:58,250 --> 00:01:06,370 don't support that new API which you can use and that new API I'm talking about is the fetch API. 14 00:01:06,650 --> 00:01:14,330 Now to use it, let me comment out all of that here inside of my promise construction function so to say, 15 00:01:15,530 --> 00:01:17,450 let's keep the promise itself however, 16 00:01:18,050 --> 00:01:25,100 so all the XMLHttpRequests logic in there is commented out and let's instead use the new API which 17 00:01:25,100 --> 00:01:27,890 we have for sending HttpRequests. 18 00:01:27,890 --> 00:01:34,460 It was invented to be more modern, to be less clunky with these strange event handlers there which is 19 00:01:34,460 --> 00:01:37,060 really not modern Javascript at all, 20 00:01:37,100 --> 00:01:43,080 that's why this new API was introduced and that new API is commonly called the fetch API. 21 00:01:43,130 --> 00:01:50,000 Now it is called such because it all works around one key function, the fetch function and this is built 22 00:01:50,060 --> 00:01:53,580 into browsers, it's exposed in Javascript just like that, 23 00:01:53,600 --> 00:01:57,420 you don't have to call it as a method on any object or anything like that, 24 00:01:57,440 --> 00:02:01,250 it's a globally available function in modern Javascript, 25 00:02:01,310 --> 00:02:07,910 as I said not in old browsers though, more on browser support in the browser support module of 26 00:02:07,910 --> 00:02:08,540 this course. 27 00:02:09,080 --> 00:02:10,760 So how do you use fetch? 28 00:02:10,970 --> 00:02:19,670 In its simplest form, fetch just takes a URL, so we can pass URL which should be a string to fetch, 29 00:02:20,300 --> 00:02:23,240 then it will send a get request. 30 00:02:23,240 --> 00:02:32,390 So if you just pass a URL to fetch, it will send a get request to that URL. Now fetch by default 31 00:02:32,570 --> 00:02:33,820 is promise based, 32 00:02:33,830 --> 00:02:38,180 so that's the first native promise API we see in this course. 33 00:02:38,300 --> 00:02:41,140 We don't have to promisify ourselves, 34 00:02:41,210 --> 00:02:43,940 it uses promises on its own. 35 00:02:44,270 --> 00:02:47,910 That means we can actually remove our promise wrapper here, 36 00:02:47,960 --> 00:02:52,500 we don't need to build our own promise, instead 37 00:02:52,780 --> 00:03:00,400 we can just return the result of fetch which as I just said is a promise. So we can fetch URL and 38 00:03:00,400 --> 00:03:07,040 then return the result which is a promise that helps us work with the response. 39 00:03:07,040 --> 00:03:12,040 Now let's see how that works before we then fine tune it for the different kinds of requests and let's 40 00:03:12,040 --> 00:03:19,120 get started with fetching posts where I call send HttpRequest and therefore, we try to send a request 41 00:03:19,120 --> 00:03:24,330 to this URL which we should now fix by the way with the help of the fetch API. 42 00:03:24,340 --> 00:03:33,220 Now if we try that and we reload and I click fetch posts, you'll see that I actually get an error, I get 43 00:03:33,220 --> 00:03:34,670 this alert here. 44 00:03:34,810 --> 00:03:38,970 Now this can be a bit deceiving, to see the actual problem, 45 00:03:38,980 --> 00:03:48,210 let's temporarily remove try catch here in fetch posts so that we don't try this block and catch any 46 00:03:48,210 --> 00:03:48,690 errors, 47 00:03:51,710 --> 00:03:53,930 like that and let's try again. 48 00:03:53,950 --> 00:04:00,700 Let's reload and click fetch posts and now we see, I get this strange error, list of posts is not ignorable. 49 00:04:00,720 --> 00:04:04,330 OK, so what's going on here? What's failing? 50 00:04:04,370 --> 00:04:10,640 Somehow we don't have list of posts, so somehow we don't get the response data when we called sendHttpRequest. 51 00:04:10,740 --> 00:04:14,000 Now in send HttpRequest 52 00:04:13,990 --> 00:04:21,760 however, in this function, I do return the result of fetch, sending a request to that URL. 53 00:04:22,000 --> 00:04:27,410 Well let's check the network tab, there we see posts were indeed fetched, 54 00:04:27,430 --> 00:04:29,390 so that seems to work, 55 00:04:29,390 --> 00:04:32,060 so what's wrong then? What's happening? 56 00:04:32,060 --> 00:04:41,070 Well the problem is or one difference is unlike our XMLHttpRequest approach here, fetch does not give 57 00:04:41,070 --> 00:04:49,020 us the parsed response as we had it available here with xhr.response but instead, it gives us a streamed 58 00:04:49,020 --> 00:04:56,520 response, which means basically that the response object we get here does not hold the body, 59 00:04:56,520 --> 00:05:02,460 the response body in a way that would be ready to be used, instead what you would have to do and 60 00:05:02,460 --> 00:05:09,990 we can do that here inside of the sendHttpRequest function, instead here, you get your response object 61 00:05:10,230 --> 00:05:13,530 and there you have access to a response 62 00:05:13,530 --> 00:05:20,340 JSON method and you can return the result of this because that actually yields a new promise as you 63 00:05:20,340 --> 00:05:22,150 see. Now JSON, 64 00:05:22,170 --> 00:05:28,500 when you call it on the response object which the fetch API gives you will parse the body of the response 65 00:05:28,800 --> 00:05:37,170 and transform it from JSON to Javascript objects and arrays but it actually does not just parse that, 66 00:05:37,230 --> 00:05:40,660 so it's not just a replacement for JSON.parse, 67 00:05:40,680 --> 00:05:47,030 it also turns the streamed response body which you have in the response object into a snapshot 68 00:05:47,040 --> 00:05:49,030 so to say with which you can work. 69 00:05:49,290 --> 00:05:56,250 So long story short, you need to call response.JSON to convert your response body, the streamed 70 00:05:56,460 --> 00:06:01,530 unparsed response body into a snapshot parsed body. 71 00:06:01,530 --> 00:06:08,790 So now with that, the overall sendHttpRequest method will yield a promise which will eventually return 72 00:06:08,820 --> 00:06:14,580 that parsed response data, response JSON is important for that. Besides response 73 00:06:14,580 --> 00:06:20,390 JSON, you also have response text for example to return plain text, 74 00:06:20,400 --> 00:06:27,150 so that will then just do the conversion from streamed to snapshot or response blob if you would be downloading 75 00:06:27,150 --> 00:06:29,430 a file, that would give you access to the file. 76 00:06:29,430 --> 00:06:33,970 Here however, we got JSON data so we need to return that. 77 00:06:34,000 --> 00:06:41,320 So now with that, if we save that and we reload and I click fetch posts, now we render the posts again, 78 00:06:41,320 --> 00:06:42,750 so now the other logic works 79 00:06:42,760 --> 00:06:48,150 as before and just as before, we get the parsed data, the parsed response 80 00:06:48,160 --> 00:06:55,090 but here important we need that extra step because it's not just JSON's data but also streamed data 81 00:06:55,120 --> 00:06:57,030 which we need to turn into a snapshot 82 00:06:57,040 --> 00:07:01,980 so to say and all of that is done by that JSON method on the response object. 83 00:07:02,390 --> 00:07:02,940 Okay, 84 00:07:03,190 --> 00:07:05,870 so we get that, we can get our posts, 85 00:07:05,870 --> 00:07:08,680 now let's make sure we can also create a new post.