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