Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses 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
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
You need to sign up for Treehouse in order to download course files.
Sign up