1 00:00:00,730 --> 00:00:05,790 Now we're going to learn how to make server requests in React using Axios, 2 00:00:05,790 --> 00:00:10,209 a promise based library that's similar to the Fetch API we used in 3 00:00:10,209 --> 00:00:12,540 the previous video. 4 00:00:12,540 --> 00:00:18,260 Like the Fetch API, Axios isn't specific to React, so you can use it to fetch 5 00:00:18,260 --> 00:00:23,630 data in other JavaScript frameworks and libraries or any Node.js app. 6 00:00:24,890 --> 00:00:31,900 Axios has useful built in features, for example, Axios supports the Promise API. 7 00:00:31,900 --> 00:00:34,998 It lets you intercept requests or responses and 8 00:00:34,998 --> 00:00:39,840 alter them before they're handled by the then or catch method. 9 00:00:39,840 --> 00:00:43,651 And it automatically converts data to JSON. 10 00:00:43,651 --> 00:00:46,895 You can also use Axios to post data to a server, and 11 00:00:46,895 --> 00:00:52,300 they can protect your app against the XSRF attacks and vulnerabilities. 12 00:00:52,300 --> 00:00:55,212 So it could also prevent malicious requests and 13 00:00:55,212 --> 00:00:57,770 actions from being executed on your app. 14 00:00:59,060 --> 00:01:04,000 So first, let's install Axios as a project dependency. 15 00:01:04,000 --> 00:01:09,790 In the terminal, I'll press Ctrl+C to stop running the app, 16 00:01:09,790 --> 00:01:13,540 then type the command npm i axios. 17 00:01:13,540 --> 00:01:17,315 Once it's installed, I'll run the app with npm start. 18 00:01:20,355 --> 00:01:24,979 Then import Axios at the top of App.js, 19 00:01:24,979 --> 00:01:29,215 with import axios from axios. 20 00:01:29,215 --> 00:01:30,209 For this video, 21 00:01:30,209 --> 00:01:34,835 I'm going to comment out the code I wrote earlier inside the useEffect hook. 22 00:01:36,160 --> 00:01:40,480 The Axios documentation provides all the available config options for 23 00:01:40,480 --> 00:01:42,890 performing a request. 24 00:01:42,890 --> 00:01:46,925 I'm going to keep things simple by copying this example snippet, 25 00:01:46,925 --> 00:01:49,064 then I'll customize it for React. 26 00:01:55,080 --> 00:02:00,108 I'll fix the formatting here by right clicking and selecting Format Document. 27 00:02:02,180 --> 00:02:05,630 Parts of this code should look familiar by now. 28 00:02:05,630 --> 00:02:08,012 The get method performs the request, 29 00:02:08,012 --> 00:02:12,560 just like the fetch method we used in the previous video. 30 00:02:12,560 --> 00:02:14,085 And the chain then and 31 00:02:14,085 --> 00:02:18,840 catch methods also work exactly as they did in the previous video. 32 00:02:19,980 --> 00:02:25,316 The function in then gets executed once the get request 33 00:02:25,316 --> 00:02:30,195 is fulfilled, and catch will handle any errors. 34 00:02:30,195 --> 00:02:34,894 First, let's pass the URL we used earlier in our fetch method. 35 00:02:38,366 --> 00:02:42,890 Then I'm going to delete the commented out fetch method. 36 00:02:42,890 --> 00:02:45,184 Don't worry, you can still view and 37 00:02:45,184 --> 00:02:48,817 reference this code when you download the project files. 38 00:02:48,817 --> 00:02:53,530 Since Axios automatically returns the response in JSON format, 39 00:02:53,530 --> 00:02:57,910 we get to skip that step and just worry about updating state. 40 00:02:59,130 --> 00:03:01,351 Once get returns the response, 41 00:03:01,351 --> 00:03:06,870 we'll update the GIFs state by passing then a function that updates the state. 42 00:03:08,140 --> 00:03:12,859 And I'm going to adjust this function syntax by changing it to an 43 00:03:12,859 --> 00:03:15,560 ES2015 arrow function. 44 00:03:15,560 --> 00:03:18,469 Inside we'll call setGifs. 45 00:03:18,469 --> 00:03:24,260 Next, looking at Axios' response schema, we see that the response for 46 00:03:24,260 --> 00:03:28,797 a request contains the following information: data, 47 00:03:28,797 --> 00:03:32,190 status, statusText, and a few others. 48 00:03:33,520 --> 00:03:37,040 So the one we're going to use to update state is data, 49 00:03:37,040 --> 00:03:42,470 which contains the response provided by the server in JSON format. 50 00:03:42,470 --> 00:03:49,640 So to access this data in the response, we'll set the Gifs state to response.data. 51 00:03:49,640 --> 00:03:52,987 Then just like we did in the previous video, 52 00:03:52,987 --> 00:03:58,150 to access GIPHY's API data array, we'll add .data to the value. 53 00:03:59,680 --> 00:04:04,350 Finally, I'll update the catch method error to an arrow function. 54 00:04:06,670 --> 00:04:11,860 And set the console.log to the same message we used in the previous video. 55 00:04:13,010 --> 00:04:17,562 So we'll pass it the message, Error fetching and parsing data. 56 00:04:21,435 --> 00:04:24,887 Let's make sure to save, and just like earlier, 57 00:04:24,887 --> 00:04:29,241 when you open up React DevTools and inspect the App component, 58 00:04:29,241 --> 00:04:33,790 you'll see the array of objects being fetched from the API. 59 00:04:33,790 --> 00:04:39,430 Perfect, I'm going to use Axios for the remainder of this workshop. 60 00:04:39,430 --> 00:04:43,520 But if you prefer to stick with the fetch method, that's fine too. 61 00:04:43,520 --> 00:04:46,928 So now we're ready to display the GIFs in our app. 62 00:04:46,928 --> 00:04:51,968 In the next video, we'll use JavaScript to map over the returned results, 63 00:04:51,968 --> 00:04:53,950 and render them into the DOM.