Fetching Data with Axios

Now you're going to learn how to make server requests in React using Axios, 0:00 a promise-based library that's similar to the Fetch API we used 0:04 in the previous video. 0:07 Like the Fetch API, Axios isn't specific to React so you can use it to fetch data 0:08 and other JavaScript frameworks and libraries or any Node.js app. 0:13 In addition to having stronger browser support than Fetch, 0:17 Axios has useful built in features. 0:21 For example, Axios supports the Promise API, it lets you intercept request or 0:23 responses and alter them before they're handled by then or catch, 0:29 and it automatically converts data to JSON. 0:33 You can also use Axios to post data to a server and 0:36 it can protect your app against XSRF or CSRF attacks and vulnerabilities. 0:40 So it could prevent malicious requests and actions from being executed on your app. 0:45 So first, let's install Axios as a project dependency. 0:50 Over in the terminal, I'll press Ctrl-C to stop running the app, 0:54 then take the command npm install --save followed by axios. 0:59 Once it's installed I'll run the app, 1:06 then import Axios at the top of app.js with import axios from 'axios'. 1:11 For this video I'm going to delete the code I wrote earlier 1:18 inside the componentDidMount method. 1:22 But don't worry you can still view and 1:25 reference this code when you download the project files. 1:26 So the Axios documentation 1:29 provides all of the available config options for performing a request. 1:32 So I'm gonna keep things simple by copying this example snippet here, 1:37 then I'll customize it for React. 1:42 So parts of this code should look familiar by now. 1:52 The get method performs the request 1:55 just like the fetch method we used in the previous video. 1:58 And the chained then and 2:01 catch methods also work exactly as they did in the previous video. 2:02 The function in then gets executed, 2:06 once the get request is fulfilled and catch will handle any errors. 2:08 So first let's pass get the URL from the trending GIFs endpoint, 2:13 again I'll copy it from the giphy API docs and pass it to get as a string. 2:19 And since Axios automatically returns the response in JSON 2:27 format we get to skip that step and just worry about updating state. 2:30 So once get returns the response, 2:35 we'll update the gif state by passing then a function returning the updated state. 2:37 And I'm also going to adjust this function syntax by changing it to 2:43 an ES2015 error function. 2:47 Inside we'll return this.setState, Or we'll update the GIF state. 2:49 So next, looking at Axios response schema we see that the response for 2:59 a request contains the following information. 3:04 data, status, statusText, and a few others. 3:07 So the one we're going to use to update state is data, 3:11 which contains the response provided by the server in JSON format. 3:14 So to access this data in the response we'll set the GIF state to response.data. 3:17 Then just like we did in the previous video, 3:26 to access Giphy API's data array, we'll add .data to the value. 3:29 Finally, I'll update the catch method to an error function and 3:35 set the console log to the same message we used in the previous video. 3:39 So we'll pass it the message, Error fetching and parsing data. 3:46 So now we'll give this a save, and 3:55 just like earlier when you open up the console in your app. 3:58 You'll see the array objects being fetched from the API and 4:02 inspecting the app component. 4:06 And React Dev Tools also shows that the GIF state consist of the 25 array of 4:08 objects, perfect. 4:12 So I'm going to use Axios for the remainder of this workshop. 4:17 But if you prefer to stick with the fetch method that's fine too. 4:20 So now we're ready to display the GIFs in our app. 4:23 So in the next video we'll use JavaScript to map over the returned results and 4:26 render them into the DOM. 4:30