Fetching Data in a React Application with Axios

Compared to frameworks like Angular, React is a library that only comes with functionality for state management and view rendering. With fewer tools baked into it, React requires additional, third-party libraries for handling important client-side features, such as routing, internationalization and sending HTTP requests to remote API endpoints. This unopinionated approach leaves the developer the responsibility of choosing these libraries to pair with React. 

For example, imagine you had to integrate an HTTP client library into your React application. You could write the HTTP client library from scratch using a low-level, imperative API like 

. However, depending on the amount of time afforded, you might not have enough time to plan and develop the library to account for every possible use case. Alternatively, you could scour the NPM ecosystem for an open-source package that already supports the features you need along with other features you may need in the future. Just typing "http client" into the NPM search bar returns just under 

Picking a specific package over other similar packages boils down to several factors, such as:

 library likely makes sense for your React application. It is a popular, promise-based HTTP client with plenty of available configuration options for customizing HTTP requests. Additionally, Axios is isomorphic, which means it can run in both client-side (browser) and server-side (Node.js) environments. With 

tens of thousands of stargazers on GitHub

, Axios's declarative API abstracts away low-level, networking implementation details and allows developers to focus more on the application code.   

Below, I'm going to show you how to fetch data in a React application with Axios.

If you decide to use a native browser API to send HTTP requests to a server from your application, then there are two widely-used options:

 object, but its imperative API is outdated by modern standards. To make AJAX calls with 

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
  // Waits for the fetch operation to be complete and for the response to be available.
  if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
    const response = JSON.parse(this.responseText);

    // Do something with the response, such as displaying it in the DOM. 
  }
};

xhr.open("GET", "https://data.cityofnewyork.us/resource/erm2-nwe9.json", true); // `true` to handle the request asynchronously (`false` for synchronous).

xhr.send();

 requires a wrapper function to create a promise-based API that utilizes 

 for the underlying implementation. Below, we wrap 

 wrapper function that returns a promise capable of sending HTTP requests.

That seems like a lot of code just to send an HTTP request! Fortunately, unlike 

, the Fetch API is promise-based and boasts a more powerful and flexible feature set. Being promised-based, the Fetch API can make use of ES6 

 syntax, which cleans up asynchronous code so it reads as synchronous code.

fetch("https://data.cityofnewyork.us/resource/erm2-nwe9.json")
  .then(response => {
    if (response.ok)
      return response.json();
    } else {
      throw response.json();
    } 
  })
  .then(data => {
    console.log(data);
  })
  .catch(err => {
    console.error(err);
  });

However, the Fetch API has several downsides:

With Axios, not only does it provide a promise-based API, but it also supports older browsers and comes with a plethora of useful features: 

Under-the-hood, the client-side version of Axios wraps around 

 while the server-side version of Axios wraps around the 

To install Axios, run the following command:

// ES6 `import` Statement
import axios from "axios";

// Or...

// CommonJS `require` Statement
const axios = require('axios').default;

To send HTTP requests with Axios, pass configuration options to the 

axios({
  method: "get", // GET request
  url: "https://data.cityofnewyork.us/resource/erm2-nwe9.json",
  responseType: "json"
}).then(response => {
  console.log(response.data);
}).catch(err => {
  console.error(err); // This automatically catches 404s unlike `fetch`!
});

Or for convenience, use the request method alias 

axios
  .get("https://data.cityofnewyork.us/resource/erm2-nwe9.json")
  .then(response => {
    console.log(response.data);
  }).catch(err => {
    console.error(err);
  });

Axios automatically provides a request method alias for each HTTP method:

If you need to intercept requests before they are sent or responses before they arrive at the 

// Request Interceptor
axios.interceptors.request.use(config => {
  // Do something before request is sent.

  // Example - Adding an "Authorization" header.
  config.headers.Authorization = `Bearer ${AUTH_TOKEN}`;

  return config;
}, error => {
  // Do something with request error.

  return Promise.reject(error);
});

// Response Interceptor
axios.interceptors.response.use(response => {
  // Do something with response data.

  // Example - Format dates based on current time zone of browser.
  response = formatDates(response, timeZone);

  return response;
}, error => {
  // Do something with response error.

  return Promise.reject(error);
});

Of course, we can cover more features of Axios, but this goes beyond the scope of this blog post. If you want to learn more about Axios and its other features, then check out the 

Typically, data-driven React applications fetch data from a server and display this data to the user via an interactive data visualization. Data should be fetched once the component is mounted to the DOM. This allows us to immediately display a loading message to the user informing them to wait patiently as the data is being retrieved. Once the data is retrieved, then the component replaces the loading message with a data visualization. 

Therefore, within functional components, data fetching should take place within the 

 hook, which performs side-effects, such as network requests, similar to the 

import { useState, useEffect } from "react";
import axios from "axios";

const BarChart = () => {
  const [ isLoading, setIsLoading ] = useState(true);
  const [ data, setData ] = useState([]);

  useEffect(() => {
    // ...
  }, []);

  return (
    <>
      { isLoading ? 
        (
          <LoadingMessage />
        ) : (
          <svg>{/* ... */}</svg>
        ) 
      }
    </>
  )
}

Because this data will only be fetched once, the 

 hook will be passed an empty dependency array to ensure any state/prop changes don't retrigger the hook and refetch the data again.

useEffect(() => {
  const fetchData = async (url) => {
    try {
      const { data } = await axios.get(url);

      setData(data);
    } catch (err) {
      console.error(err);
    }
    
    setIsLoading(false);
  };

  fetchData("https://data.cityofnewyork.us/resource/erm2-nwe9.json");
}, []);

 that uses Axios to fetch data from a server located at a particular URL. Once the server returns the response, destructure out the 

 object. If the request fails or times out, then Axios throws an error, which will be handled by the 

 block. To keep the example short and simple, this 

 block prints the error to the console of the developer tools. After setting the 

 state variable or handling the error, the 

, which causes the component to render the 

import { useState, useEffect } from "react";
import axios from "axios";

const BarChart = () => {
  const [ isLoading, setIsLoading ] = useState(true);
  const [ data, setData ] = useState([]);

  useEffect(() => {
    const fetchData = async (url) => {
      try {
        const { data } = await axios.get(url);

        setData(data);
      } catch (err) {
        console.error(err);
      }
      
      setIsLoading(false);
    };

    fetchData("https://data.cityofnewyork.us/resource/erm2-nwe9.json");
  }, []);

  return (
    <>
      { isLoading ? 
        (
          <LoadingMessage />
        ) : (
          <svg>{/* ... */}</svg>
        ) 
      }
    </>
  )
}

Try using Axios in your next React project!

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Fetching Data in a React Application with Axios

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript