1 00:00:00,480 --> 00:00:04,241 Now you're going to learn how to make server requests in React using Axios, 2 00:00:04,241 --> 00:00:07,474 a promise-based library that's similar to the Fetch API we used 3 00:00:07,474 --> 00:00:08,667 in the previous video. 4 00:00:08,667 --> 00:00:13,654 Like the Fetch API, Axios isn't specific to React so you can use it to fetch data 5 00:00:13,654 --> 00:00:17,987 and other JavaScript frameworks and libraries or any Node.js app. 6 00:00:17,987 --> 00:00:21,515 In addition to having stronger browser support than Fetch, 7 00:00:21,515 --> 00:00:23,667 Axios has useful built in features. 8 00:00:23,667 --> 00:00:29,113 For example, Axios supports the Promise API, it lets you intercept request or 9 00:00:29,113 --> 00:00:33,747 responses and alter them before they're handled by then or catch, 10 00:00:33,747 --> 00:00:36,856 and it automatically converts data to JSON. 11 00:00:36,856 --> 00:00:40,096 You can also use Axios to post data to a server and 12 00:00:40,096 --> 00:00:45,570 it can protect your app against XSRF or CSRF attacks and vulnerabilities. 13 00:00:45,570 --> 00:00:49,270 So it could prevent malicious requests and actions from being executed on your app. 14 00:00:50,420 --> 00:00:54,400 So first, let's install Axios as a project dependency. 15 00:00:54,400 --> 00:00:59,369 Over in the terminal, I'll press Ctrl-C to stop running the app, 16 00:00:59,369 --> 00:01:04,003 then take the command npm install --save followed by axios. 17 00:01:06,743 --> 00:01:11,073 Once it's installed I'll run the app, 18 00:01:11,073 --> 00:01:18,981 then import Axios at the top of app.js with import axios from 'axios'. 19 00:01:18,981 --> 00:01:22,668 For this video I'm going to delete the code I wrote earlier 20 00:01:22,668 --> 00:01:25,238 inside the componentDidMount method. 21 00:01:25,238 --> 00:01:26,881 But don't worry you can still view and 22 00:01:26,881 --> 00:01:29,417 reference this code when you download the project files. 23 00:01:29,417 --> 00:01:32,970 So the Axios documentation 24 00:01:32,970 --> 00:01:37,920 provides all of the available config options for performing a request. 25 00:01:37,920 --> 00:01:42,097 So I'm gonna keep things simple by copying this example snippet here, 26 00:01:42,097 --> 00:01:44,196 then I'll customize it for React. 27 00:01:52,618 --> 00:01:55,400 So parts of this code should look familiar by now. 28 00:01:55,400 --> 00:01:58,400 The get method performs the request 29 00:01:58,400 --> 00:02:01,008 just like the fetch method we used in the previous video. 30 00:02:01,008 --> 00:02:02,750 And the chained then and 31 00:02:02,750 --> 00:02:06,160 catch methods also work exactly as they did in the previous video. 32 00:02:06,160 --> 00:02:08,980 The function in then gets executed, 33 00:02:08,980 --> 00:02:13,670 once the get request is fulfilled and catch will handle any errors. 34 00:02:13,670 --> 00:02:19,570 So first let's pass get the URL from the trending GIFs endpoint, 35 00:02:19,570 --> 00:02:25,940 again I'll copy it from the giphy API docs and pass it to get as a string. 36 00:02:27,030 --> 00:02:30,480 And since Axios automatically returns the response in JSON 37 00:02:30,480 --> 00:02:35,410 format we get to skip that step and just worry about updating state. 38 00:02:35,410 --> 00:02:37,819 So once get returns the response, 39 00:02:37,819 --> 00:02:43,728 we'll update the gif state by passing then a function returning the updated state. 40 00:02:43,728 --> 00:02:47,798 And I'm also going to adjust this function syntax by changing it to 41 00:02:47,798 --> 00:02:49,769 an ES2015 error function. 42 00:02:49,769 --> 00:02:59,930 Inside we'll return this.setState, Or we'll update the GIF state. 43 00:02:59,930 --> 00:03:04,341 So next, looking at Axios response schema we see that the response for 44 00:03:04,341 --> 00:03:07,420 a request contains the following information. 45 00:03:07,420 --> 00:03:11,430 data, status, statusText, and a few others. 46 00:03:11,430 --> 00:03:14,040 So the one we're going to use to update state is data, 47 00:03:14,040 --> 00:03:17,349 which contains the response provided by the server in JSON format. 48 00:03:17,349 --> 00:03:24,168 So to access this data in the response we'll set the GIF state to response.data. 49 00:03:26,329 --> 00:03:29,484 Then just like we did in the previous video, 50 00:03:29,484 --> 00:03:34,364 to access Giphy API's data array, we'll add .data to the value. 51 00:03:35,984 --> 00:03:39,670 Finally, I'll update the catch method to an error function and 52 00:03:39,670 --> 00:03:43,644 set the console log to the same message we used in the previous video. 53 00:03:46,605 --> 00:03:51,184 So we'll pass it the message, Error fetching and parsing data. 54 00:03:55,605 --> 00:03:58,099 So now we'll give this a save, and 55 00:03:58,099 --> 00:04:02,325 just like earlier when you open up the console in your app. 56 00:04:02,325 --> 00:04:06,375 You'll see the array objects being fetched from the API and 57 00:04:06,375 --> 00:04:08,565 inspecting the app component. 58 00:04:08,565 --> 00:04:12,912 And React Dev Tools also shows that the GIF state consist of the 25 array of 59 00:04:12,912 --> 00:04:14,165 objects, perfect. 60 00:04:17,605 --> 00:04:20,690 So I'm going to use Axios for the remainder of this workshop. 61 00:04:20,690 --> 00:04:23,110 But if you prefer to stick with the fetch method that's fine too. 62 00:04:23,110 --> 00:04:26,410 So now we're ready to display the GIFs in our app. 63 00:04:26,410 --> 00:04:30,880 So in the next video we'll use JavaScript to map over the returned results and 64 00:04:30,880 --> 00:04:32,410 render them into the DOM.