Axios is a popular HTTP client that makes it easy to send asynchronous HTTP requests to REST endpoints and perform CRUD operations. In this guide, we'll cover everything you need to know about using Axios in React—from installation and basic usage to advanced features like interceptors and error handling.

1. What is Axios?

Axios is a promise-based HTTP client for JavaScript that works both in the browser and in Node.js. It simplifies the process of making HTTP requests and handling responses, offering a clean API and powerful features.

Key Benefits of Axios:

Promise-based: Allows you to use async/await for cleaner asynchronous code.
Automatic JSON Data Transformation: Converts JSON data automatically so you don’t have to parse it manually.
Interceptors: Easily modify requests or responses before they are handled by .then() or .catch().
Error Handling: Provides robust error handling with detailed error messages.

2. Setting Up Axios in a React Application

Step 1: Installation

First, add Axios to your project via npm:

npm install axios

Step 2: Creating an Axios Instance

Creating an instance allows you to set up default configurations (such as a base URL, headers, or timeouts) that apply to all your requests.

// src/api/axiosInstance.js

import axios from 'axios';

const axiosInstance = axios.create({

baseURL: 'https://api.example.com', // Replace with your API base URL

timeout: 10000, // Request timeout in milliseconds

headers: {

'Content-Type': 'application/json',

},

});

export default axiosInstance;

3. Making HTTP Requests with Axios in React

Basic GET Request

Let’s create a simple component that fetches data from an API using Axios.

// src/components/UsersList.js

import { useEffect, useState } from 'react';

import axiosInstance from '../api/axiosInstance';

const UsersList = () => {

const [users, setUsers] = useState([]);

const [error, setError] = useState(null);

// Fetch users on component mount

useEffect(() => {

const fetchUsers = async () => {

try {

const response = await axiosInstance.get('/users');

setUsers(response.data);

} catch (err) {

setError('Error fetching users');

console.error(err);

}

};

fetchUsers();

}, []);

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

return (

<div>

<h2>Users List</h2>

<ul>

{users.map((user) => (

))}

</ul>

</div>

);

};

export default UsersList;

Explanation:

We use the useEffect hook to make the GET request when the component mounts.
The response data is stored in state using useState.
Basic error handling is implemented with a try/catch block.

4. Handling POST Requests and Form Submission

Here’s an example of how to send data to an API endpoint using a POST request:

// src/components/AddUser.js

import { useState } from 'react';

import axiosInstance from '../api/axiosInstance';

const AddUser = () => {

const [name, setName] = useState('');

const [message, setMessage] = useState('');

const handleSubmit = async (e) => {

e.preventDefault();

try {

const response = await axiosInstance.post('/users', { name });

setMessage('User added successfully!');

console.log(response.data);

} catch (err) {

setMessage('Error adding user.');

console.error(err);

}

};

return (

<input

type="text"

placeholder="Enter user name"

value={name}

onChange={(e) => setName(e.target.value)}

required

/>

{message && <p>{message}</p>}

</form>

);

};

export default AddUser;

Explanation:

The form collects user input, and on submission, an Axios POST request sends the data.
Success and error messages are managed using state.

5. Advanced Features: Axios Interceptors

Axios interceptors allow you to run code or modify the request/response before the request is sent or after a response is received. This is especially useful for tasks like adding authentication tokens or handling errors globally.

Request Interceptor Example

// src/api/axiosInstance.js

import axios from 'axios';

const axiosInstance = axios.create({

baseURL: 'https://api.example.com',

timeout: 10000,

headers: {

'Content-Type': 'application/json',

},

});

// Add a request interceptor

axiosInstance.interceptors.request.use(

(config) => {

// For example, add an Authorization header if a token exists

const token = localStorage.getItem('auth_token');

if (token) {

config.headers['Authorization'] = `Bearer ${token}`;

}

return config;

},

(error) => Promise.reject(error)

);

export default axiosInstance;

Response Interceptor Example

// Add a response interceptor

axiosInstance.interceptors.response.use(

(response) => {

// Any status code in the range of 2xx triggers this function

return response;

},

(error) => {

// Any status code outside the range of 2xx triggers this function

if (error.response && error.response.status === 401) {

// Handle unauthorized access

console.error('Unauthorized, logging out...');

}

return Promise.reject(error);

}

);

Explanation:

Request Interceptor: Modifies the config before the request is sent, such as by adding an authentication token.
Response Interceptor: Checks the response status and handles errors globally, like catching a 401 Unauthorized error.

6. Best Practices and Tips

Use Async/Await: Modern syntax makes handling asynchronous code more readable.
Centralize Your API Calls: Create a single Axios instance with default settings to maintain consistency across your application.
Handle Errors Gracefully: Always implement error handling to provide users with feedback and support debugging.
Keep Interceptors Lean: Avoid complex logic in interceptors to maintain clarity and performance.

7. Conclusion

Axios is an indispensable tool for managing HTTP requests in React applications. By mastering Axios, you can easily handle GET and POST requests, manage errors effectively, and use advanced features like interceptors to streamline your workflow.