How to Handle API Requests in React Using Axios

In today’s interconnected web applications, handling API requests efficiently is crucial for creating responsive and dynamic user experiences. Let’s dive into how we can leverage Axios, a powerful HTTP client, to manage API requests in React applications.

Getting Started with Axios

First things first, let’s get Axios installed in your React project. Open your terminal and run:

npm install axios

Basic API Requests

At its core, Axios makes it incredibly straightforward to send HTTP requests. Here’s how you can make a simple GET request:

import axios from 'axios';

const fetchData = async () => {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

Creating an Axios Instance

When working with larger applications, it’s best practice to create a dedicated Axios instance. This approach allows you to set up default configurations that can be reused across your entire application:

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${YOUR_TOKEN}`
  }
});

Error Handling and Loading States

One of the most important aspects of handling API requests is managing loading states and errors effectively. Here’s a practical example using React hooks:

import { useState, useEffect } from 'react';

const UserProfile = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUser = async () => {
      try {
        setLoading(true);
        const response = await api.get('/user/profile');
        setData(response.data);
      } catch (error) {
        setError('Failed to fetch user data');
      } finally {
        setLoading(false);
      }
    };

    fetchUser();
  }, []);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>{error}</div>;

  return <div>{/* Render user data */}</div>;
};

Interceptors for Global Error Handling

Axios interceptors are powerful tools for handling requests or responses globally across your application. Here’s how to implement them:

api.interceptors.response.use(
  (response) => response,
  (error) => {
    if (error.response.status === 401) {
      // Handle unauthorized access
      localStorage.removeItem('token');
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

Conclusion

Mastering API requests with Axios in React applications opens up endless possibilities for creating robust and scalable applications. Remember to always implement proper error handling, loading states, and consider using interceptors for global error management. As your application grows, you’ll find these patterns invaluable for maintaining clean and maintainable code.