1 00:00:00,390 --> 00:00:03,770 To code along with me, launch the workspace with this video or download 2 00:00:03,770 --> 00:00:07,460 the project files for this workshop and open them in your favorite text editor. 3 00:00:07,460 --> 00:00:08,700 When you open the project files or 4 00:00:08,700 --> 00:00:13,660 workspace, you should see an index.html file and a js 5 00:00:13,660 --> 00:00:18,780 folder containing a file named app.js, the two main files we'll be working with. 6 00:00:18,780 --> 00:00:24,770 When you preview index.html in the browser you'll see an empty select menu and 7 00:00:24,770 --> 00:00:27,698 div container, and below them a simple form. 8 00:00:27,698 --> 00:00:32,602 Over in app.js, there are three pre-written variables. 9 00:00:32,602 --> 00:00:39,480 It's selecting elements from index.html like the select menu, card div and form. 10 00:00:39,480 --> 00:00:41,790 We're going to be working with these elements throughout the workshop. 11 00:00:42,970 --> 00:00:48,130 So the fetch API provides an easier way to make network requests in the browser and 12 00:00:48,130 --> 00:00:49,520 handle responses. 13 00:00:49,520 --> 00:00:52,960 To make a request, you use the global fetch method. 14 00:00:52,960 --> 00:00:55,400 Fetch takes one mandatory argument. 15 00:00:55,400 --> 00:00:57,280 The path to the resource you want to fetch. 16 00:00:58,410 --> 00:01:03,940 I'm going to request data from the Dog API at dog.ceo/dog-api. 17 00:01:03,940 --> 00:01:07,680 This simple API returns a list of dog breeds and 18 00:01:07,680 --> 00:01:11,230 random images of dogs either by breed or all breeds. 19 00:01:11,230 --> 00:01:16,220 Now many APIs require an API key to let you connect to their web server and 20 00:01:16,220 --> 00:01:17,240 access data. 21 00:01:17,240 --> 00:01:22,010 To keep things simple I chose a public API that does not require an API key. 22 00:01:22,010 --> 00:01:26,740 And here you can see all the different endpoints like all dogs by breed, 23 00:01:26,740 --> 00:01:28,740 by sub breed and so on. 24 00:01:28,740 --> 00:01:33,880 So first, I'm going to return data from the All dogs endpoint. 25 00:01:33,880 --> 00:01:39,570 And I want this endpoint that returns a random dog image from all the breeds. 26 00:01:39,570 --> 00:01:46,379 So I can click this JSON link and copy this URL in the address bar. 27 00:01:46,379 --> 00:01:50,726 Over in app.js under the fetch functions comment, 28 00:01:50,726 --> 00:01:56,963 I'll first type the fetch method, and pass it the URL to fetch as a string. 29 00:02:01,192 --> 00:02:05,584 As I mentioned in the previous video, Fetch API uses JavaScript promises to 30 00:02:05,584 --> 00:02:08,410 handle the results returned from the server. 31 00:02:08,410 --> 00:02:12,723 Again, be sure to watch our workshop on JavaScript promises if you're not sure how 32 00:02:12,723 --> 00:02:13,595 promises work. 33 00:02:13,595 --> 00:02:18,413 A promise represents the eventual result of an asynchronous operation. 34 00:02:18,413 --> 00:02:22,825 Similar to callbacks, promises allow us to wait on certain code to finish 35 00:02:22,825 --> 00:02:27,735 execution before running the next bit of code in a cleaner, more readable way. 36 00:02:27,735 --> 00:02:31,535 Now the fetch method itself returns a promise. 37 00:02:31,535 --> 00:02:37,564 So for example, if I copy this fetch method and run it in my browser's console. 38 00:02:39,270 --> 00:02:42,670 Notice how it returns a promise object. 39 00:02:42,670 --> 00:02:49,160 And if I click the arrow to expand it, we see that the promise status is resolved. 40 00:02:49,160 --> 00:02:52,475 That means the asynchronous task was completed successfully. 41 00:02:52,475 --> 00:02:55,685 The promise was fulfilled because the browser received a response from 42 00:02:55,685 --> 00:02:56,755 the server. 43 00:02:56,755 --> 00:02:59,985 Now nothing's happened yet in our app because we haven't written 44 00:02:59,985 --> 00:03:03,225 any code to handle the response and the return data. 45 00:03:03,225 --> 00:03:06,055 We'll do that now using a sequence of promises. 46 00:03:06,055 --> 00:03:08,885 Promises get executed in sequence. 47 00:03:08,885 --> 00:03:13,980 You chain then methods to the fetch method which returns a promise of their own. 48 00:03:13,980 --> 00:03:18,890 The methods get executed sequentially once the previous promise is fulfilled. 49 00:03:18,890 --> 00:03:23,090 In other words, something happens after something else is resolved. 50 00:03:23,090 --> 00:03:26,675 So in our case, the fetch promise is fulfilled or 51 00:03:26,675 --> 00:03:30,355 resolved when the browser receives the response from the server. 52 00:03:30,355 --> 00:03:33,982 So, next I'll chain a then method to fetch and 53 00:03:33,982 --> 00:03:39,376 pass it a function using an error function that takes the response via 54 00:03:39,376 --> 00:03:44,600 a parameter I'll call response and logs it to the console for now. 55 00:03:49,637 --> 00:03:53,781 Remember you're able to place the chain then methods on separate lines to make 56 00:03:53,781 --> 00:03:55,800 your code easier to read. 57 00:03:55,800 --> 00:04:00,890 Now, this isn't immediately going to return the data we expect. 58 00:04:00,890 --> 00:04:05,740 You see once the data finishes loading and a fetch promise is fulfilled, 59 00:04:05,740 --> 00:04:10,380 fetch returns a response object containing information about the response, 60 00:04:10,380 --> 00:04:15,000 like the status code and the corresponding status message. 61 00:04:15,000 --> 00:04:18,440 So here, the response lets us know that the request went through. 62 00:04:19,630 --> 00:04:24,870 The actual data we want is in the body property of the response object. 63 00:04:24,870 --> 00:04:28,330 Now the API we're using returns data in JSON. 64 00:04:28,330 --> 00:04:33,810 So in order to access and use the data, we need to parse it to JSON first. 65 00:04:33,810 --> 00:04:39,270 So I'll change the function to return the raw data 66 00:04:39,270 --> 00:04:45,254 in the response in JSON format using response.json. 67 00:04:45,254 --> 00:04:48,294 There are different methods you can use on a response object. 68 00:04:48,294 --> 00:04:52,601 Each lets you handle different response types, for example, 69 00:04:52,601 --> 00:04:56,160 blob for images, text for text files and more. 70 00:04:56,160 --> 00:04:59,810 I posted examples of some of the other common methods in the teacher's notes. 71 00:05:01,230 --> 00:05:08,770 So, response.json reads the response and returns a promise that resolves to json. 72 00:05:08,770 --> 00:05:12,270 And because we're using a single line arrow function, 73 00:05:12,270 --> 00:05:15,850 the promise returned from the response.json() method call 74 00:05:15,850 --> 00:05:19,820 will be implicitly returned from our arrow function. 75 00:05:19,820 --> 00:05:22,440 And this allows us to chain another 76 00:05:22,440 --> 00:05:25,810 then method() onto our existing then() method call. 77 00:05:25,810 --> 00:05:30,130 So inside this method is where we can do something with the json data. 78 00:05:30,130 --> 00:05:34,230 For example, iterate over it, and insert it into our page's content. 79 00:05:34,230 --> 00:05:40,572 So in the second then method, I'll pass a function that takes the json data, 80 00:05:40,572 --> 00:05:46,153 via a parameter I'll call data, and logs it to the console for now. 81 00:05:48,295 --> 00:05:51,950 Let's go back to our console, refresh. 82 00:05:51,950 --> 00:05:55,141 And great, now we're getting the actual JSON data. 83 00:05:55,141 --> 00:05:59,540 In the JSON object there's a property named message, and 84 00:05:59,540 --> 00:06:01,974 the value is the URL to an image. 85 00:06:01,974 --> 00:06:09,382 So to access the value of message I'll log data.message. 86 00:06:12,978 --> 00:06:18,800 Refresh the page, and this is exactly what we need, the URL as a string. 87 00:06:18,800 --> 00:06:24,470 And just like that with three short and simple methods, we have our data. 88 00:06:24,470 --> 00:06:25,290 Now, as you can see, 89 00:06:25,290 --> 00:06:30,400 each time I refresh the page, the endpoint returns a different URL. 90 00:06:30,400 --> 00:06:34,970 And now, we can use this URL in an image element source attribute to display 91 00:06:34,970 --> 00:06:35,690 a random dog image. 92 00:06:35,690 --> 00:06:38,350 And we'll do just that in the next video. 93 00:06:38,350 --> 00:06:41,750 Keep in mind that by default, fetch won't send or 94 00:06:41,750 --> 00:06:43,950 receive any cookies from the server. 95 00:06:43,950 --> 00:06:47,220 And this will affect you in dealing with the user authentication. 96 00:06:47,220 --> 00:06:51,095 So the fetch method also accepts an optional second parameter, 97 00:06:51,095 --> 00:06:56,400 an init options object you can use to customize the HTTP request. 98 00:06:56,400 --> 00:07:00,375 So for example you can send a request with credentials included, or 99 00:07:00,375 --> 00:07:04,415 make a post request instead of the default get request. 100 00:07:04,415 --> 00:07:08,795 And you'll learn more about this in the final video when we post data to a server 101 00:07:08,795 --> 00:07:09,815 using fetch. 102 00:07:09,815 --> 00:07:12,897 For now you can read more about it in the teacher's notes with this video.