Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

Fetching Data with Axios

4:32 with Guil Hernandez

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