How to fetch data in React with Axios
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Fetching data with Axios provides enhanced HTTP functionality compared to native fetch, including automatic JSON parsing, request/response interceptors, and better error handling. As the creator of CoreUI, a widely used open-source UI library, I’ve used Axios for API communication in countless React applications over 25 years of development. From my expertise, the most effective approach is using Axios within useEffect with proper error handling and loading states. This creates robust data fetching that handles various network conditions gracefully.
Use Axios with useEffect to fetch data with enhanced HTTP features and error handling.
const [data, setData] = useState(null)
const [loading, setLoading] = useState(true)
useEffect(() => {
axios.get('/api/users')
.then(response => setData(response.data))
.catch(error => console.error(error))
.finally(() => setLoading(false))
}, [])
Here Axios automatically parses JSON responses and provides the data in response.data. The promise chain handles success with then(), errors with catch(), and cleanup with finally(). Axios offers better error information, automatic request/response transformations, and the ability to set global configurations for base URLs and headers.
Best Practice Note:
This is the same API integration pattern we use in CoreUI React components for reliable data fetching. Consider creating custom hooks for data fetching and use Axios interceptors for global error handling and authentication token management in larger applications.
