Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Data Fetching in React!
You have completed Data Fetching in React!
Preview
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