Best Practices for Using Axios to Make HTTP Requests to a Spring Backend in a React Application

1. Avoid Hardcoding URLs

Don’t write like this:

axios.get('http://localhost:8080/api/endpoint')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

Best Practice: Instead, configure a base URL and create an Axios instance to avoid repetition and make your code more manageable.

import axios from 'axios';

const apiClient = axios.create({
  baseURL: 'http://localhost:8080/api',
  headers: {
    'Content-Type': 'application/json',
  },
});
export default apiClient;

Use the instance for requests:

apiClient.get('/endpoint')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

WHY?

• This practice helps avoid the redundancy of writing the full URL in every request, making the code cleaner and easier to refactor if the base URL changes.

• In production, the base URL will likely change from localhost to a real domain. Having a single place to change the base URL minimizes errors and simplifies the deployment process.

2. Centralize API Logic

Don’t write like this:

axios.get('http://localhost:8080/api/endpoint1')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

axios.post('http://localhost:8080/api/endpoint2', data)
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

Best Practice: Create a service layer to manage API interactions, enhancing reusability and organization.

import apiClient from './apiClient';

export const fetchEndpoint1 = () => {
  return apiClient.get('/endpoint1');
};
export const postEndpoint2 = (data) => {
  return apiClient.post('/endpoint2', data);
};

Use the service layer in your components:

import { fetchEndpoint1, postEndpoint2 } from './apiService';

fetchEndpoint1()
  .then(response => console.log(response.data))
  .catch(error => console.error(error));
postEndpoint2(data)
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

WHY?

• Centralizing API logic keeps your components cleaner and focuses them on UI logic. It also makes API calls reusable across different components.

• In a large application, this practice ensures that any changes to API calls (like adding headers or changing endpoints) need to be made in one place, reducing the risk of bugs.

3. Handle Errors Gracefully

Don’t write like this:

axios.get('/endpoint')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

Best Practice: Create a centralized error handling mechanism to handle different types of errors consistently.

// apiClient.js
apiClient.interceptors.response.use(
  response => response,
  error => {
    console.error('API call failed:', error);
    // Handle specific error cases
    if (error.response.status === 401) {
      // Unauthorized
    } else if (error.response.status === 404) {
      // Not found
    }
    return Promise.reject(error);
  }
);

In your component:

fetchEndpoint1()
  .then(response => console.log(response.data))
  .catch(error => {
    // Specific error handling can be done here if needed
  });

WHY?

• Consistent error handling helps developers quickly understand and fix issues.

• In production, it ensures that users receive meaningful error messages and that errors are logged appropriately for debugging.

4. Use Asynchronous Functions

Don’t write like this:

axios.get('/endpoint')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

Best Practice: Use async/await for cleaner and more readable asynchronous code.

const fetchData = async () => {
  try {
    const response = await apiClient.get('/endpoint');
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

fetchData();

WHY?

• async/await makes asynchronous code look synchronous, improving readability and maintainability.

• This reduces the likelihood of nesting multiple .then calls, which can lead to harder-to-read and error-prone code.

5. Optimize with Request Interceptors

Don’t write like this:

axios.get('/endpoint')
  .then(response => {
    // Process response
  })
  .catch(error => {
    // Handle error
  });

Best Practice: Use request interceptors to add common configurations like authentication tokens.

apiClient.interceptors.request.use(
  config => {
    // Add authorization token to every request
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => Promise.reject(error)
);

WHY?

• This helps in managing headers like authorization tokens centrally, ensuring all requests carry necessary headers without repetition.

• In production, it simplifies adding or changing request configurations, ensuring all requests are uniformly managed.

6. Ensure HTTP Requests When Necessary

If your application requires HTTP instead of HTTPS, such as during local development, you can configure Axios accordingly.

Best Practice: Explicitly set the httpsAgent option to false when creating an Axios instance.

const instance = axios.create({
  baseURL: 'http://localhost:8080/api', // Ensure HTTP is used
  httpsAgent: false, // Disable HTTPS
  headers: {
    'Content-Type': 'application/json',
  },
});

export default instance;

WHY?

• Disabling HTTPS is useful in a local development environment where setting up HTTPS can be cumbersome and unnecessary.

• This practice should only be used in non-production environments. For production, always use HTTPS to ensure the security of data transmission.

By following these best practices, you ensure that your Axios requests in a React application interacting with a Spring backend are efficient, maintainable, and scalable. This approach helps in managing API calls effectively, making the codebase cleaner and more professional.