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.
Axios Snippet
axios.get()
.then(function (response) {
// handle success
})
.catch(function (error) {
// handle error
console.log(error);
})
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Now we'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 in
0:05
the previous video.
0:10
Like the Fetch API, Axios isn't specific
to React, so you can use it to fetch
0:12
data in other JavaScript frameworks and
libraries or any Node.js app.
0:18
Axios has useful built in features, for
example, Axios supports the Promise API.
0:24
It lets you intercept requests or
responses and
0:31
alter them before they're handled
by the then or catch method.
0:34
And it automatically
converts data to JSON.
0:39
You can also use Axios to
post data to a server, and
0:43
they can protect your app against
the XSRF attacks and vulnerabilities.
0:46
So it could also prevent
malicious requests and
0:52
actions from being executed on your app.
0:55
So first, let's install Axios
as a project dependency.
0:59
In the terminal,
I'll press Ctrl+C to stop running the app,
1:04
then type the command npm i axios.
1:09
Once it's installed,
I'll run the app with npm start.
1:13
Then import Axios at the top of App.js,
1:20
with import axios from axios.
1:24
For this video,
1:29
I'm going to comment out the code I wrote
earlier inside the useEffect hook.
1:30
The Axios documentation provides all
the available config options for
1:36
performing a request.
1:40
I'm going to keep things simple
by copying this example snippet,
1:42
then I'll customize it for React.
1:46
I'll fix the formatting here by right
clicking and selecting Format Document.
1:55
Parts of this code should
look familiar by now.
2:02
The get method performs the request,
2:05
just like the fetch method we
used in the previous video.
2:08
And the chain then and
2:12
catch methods also work exactly as
they did in the previous video.
2:14
The function in then gets
executed once the get request
2:19
is fulfilled, and
catch will handle any errors.
2:25
First, let's pass the URL we used
earlier in our fetch method.
2:30
Then I'm going to delete
the commented out fetch method.
2:38
Don't worry, you can still view and
2:42
reference this code when you
download the project files.
2:45
Since Axios automatically returns
the response in JSON format,
2:48
we get to skip that step and
just worry about updating state.
2:53
Once get returns the response,
2:59
we'll update the GIFs state by passing
then a function that updates the state.
3:01
And I'm going to adjust this function
syntax by changing it to an
3:08
ES2015 arrow function.
3:12
Inside we'll call setGifs.
3:15
Next, looking at Axios' response schema,
we see that the response for
3:18
a request contains the following
information: data,
3:24
status, statusText, and a few others.
3:28
So the one we're going to
use to update state is data,
3:33
which contains the response provided
by the server in JSON format.
3:37
So to access this data in the response,
we'll set the Gifs state to response.data.
3:42
Then just like we did
in the previous video,
3:49
to access GIPHY's API data array,
we'll add .data to the value.
3:52
Finally, I'll update the catch
method error to an arrow function.
3:59
And set the console.log to the same
message we used in the previous video.
4:06
So we'll pass it the message,
Error fetching and parsing data.
4:13
Let's make sure to save,
and just like earlier,
4:21
when you open up React DevTools and
inspect the App component,
4:24
you'll see the array of objects
being fetched from the API.
4:29
Perfect, I'm going to use Axios for
the remainder of this workshop.
4:33
But if you prefer to stick with
the fetch method, that's fine too.
4:39
So now we're ready to
display the GIFs in our app.
4:43
In the next video, we'll use JavaScript
to map over the returned results,
4:46
and render them into the DOM.
4:51
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up