Kathirvel S

Posted on May 13

Mastering Axios in React: API Calls Made Easy

#javascript #react #beginners #webdev

Introduction

Welcome back to Episode 7 of our series — “Let’s Master React Hooks Together.”

So far in this series, we’ve explored how React Hooks help us manage state, handle side effects, and build cleaner, smarter components. But as applications grow, one thing becomes unavoidable — working with APIs and backend data.

A React application without API communication is like a car without fuel. Whether you're building a social media app, an e-commerce platform, or a dashboard, your frontend constantly needs to fetch, send, update, and delete data from servers.

That’s where Axios comes into the picture.

In this episode, we’ll deeply understand:

What Axios is
Why developers prefer it
How Axios works in React
GET, POST, PUT, DELETE requests
Error handling
Async/Await
Interceptors
Best practices
Real-world usage

By the end of this article, you’ll not only know how to use Axios — you’ll understand why it has become one of the most trusted tools in modern React development.

So let’s continue our journey and master another essential part of React development together.

What Is Axios?

Axios is a promise-based HTTP client for JavaScript.

In simple words, Axios helps your React application send and receive data from APIs.

It works in:

React
Node.js
Vue
Angular
Plain JavaScript applications

Axios allows developers to make requests such as:

GET → Fetch data
POST → Send data
PUT → Update data
DELETE → Remove data

Why Do We Need Axios in React?

React itself focuses only on building user interfaces. It does not include a built-in system for API handling.

To communicate with servers, we need tools like:

Fetch API
Axios

Although JavaScript already provides the Fetch API, many developers prefer Axios because it is simpler and provides more useful features.

Why Developers Prefer Axios Over Fetch

Here are some major reasons developers choose Axios:

1. Cleaner Syntax

Axios code is usually shorter and easier to read.

Example with Fetch

fetch("https://jsonplaceholder.typicode.com/users")
  .then(response => response.json())
  .then(data => console.log(data))

Example with Axios

axios.get("https://jsonplaceholder.typicode.com/users")
  .then(response => console.log(response.data))

Axios automatically converts JSON data, reducing extra code.

2. Better Error Handling

Axios handles HTTP errors more effectively.

For example:

404 errors
500 server errors
Network failures

It provides detailed error responses that help developers debug faster.

3. Automatic JSON Transformation

Axios automatically:

Converts request data to JSON
Parses response JSON automatically

With Fetch, you need to manually call .json().

4. Request Cancellation

Axios allows cancelling requests.

This is useful when:

Users leave a page before data loads
Preventing memory leaks
Avoiding unnecessary API calls

5. Interceptors

Axios provides interceptors that allow developers to:

Modify requests
Add authentication tokens
Handle errors globally

This is extremely useful in large applications.

Installing Axios in React

To use Axios in a React project, install it using npm.

npm install axios

Or using yarn:

yarn add axios

How Axios Works in React

Axios works by sending HTTP requests from your React frontend to a backend API.

The process looks like this:

React component loads
Axios sends request to API
Server processes request
Server sends response
React updates the UI with received data

Making Your First GET Request

A GET request is used to fetch data.

Example

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

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/users")
      .then((response) => {
        setUsers(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  return (
    <div>
      <h1>Users List</h1>

      {users.map((user) => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}

export default Users;

Understanding the Code

`axios.get()`

Used to fetch data from an API.

axios.get(url)

`.then()`

Runs when the request succeeds.

.then((response) => {
   console.log(response.data)
})

`.catch()`

Handles errors.

.catch((error) => {
   console.log(error)
})

Using Async/Await with Axios

Modern React applications often use async/await because it looks cleaner.

Example

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

function Posts() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetchPosts();
  }, []);

  const fetchPosts = async () => {
    try {
      const response = await axios.get(
        "https://jsonplaceholder.typicode.com/posts"
      );

      setPosts(response.data);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div>
      <h1>Posts</h1>

      {posts.map((post) => (
        <p key={post.id}>{post.title}</p>
      ))}
    </div>
  );
}

export default Posts;

Sending Data with POST Request

POST requests are used to send data to a server.

Example

import axios from "axios";

const addUser = async () => {
  try {
    const response = await axios.post(
      "https://jsonplaceholder.typicode.com/users",
      {
        name: "John Doe",
        email: "john@example.com",
      }
    );

    console.log(response.data);
  } catch (error) {
    console.log(error);
  }
};

Updating Data with PUT Request

PUT requests update existing data.

Example

axios.put("https://jsonplaceholder.typicode.com/users/1", {
  name: "Updated Name",
});

Deleting Data with DELETE Request

DELETE requests remove data from a server.

Example

axios.delete("https://jsonplaceholder.typicode.com/users/1");

Axios Response Object

Axios responses contain useful information.

Example

const response = await axios.get(url);

console.log(response);

Common Properties

Property	Description
`data`	Actual response data
`status`	HTTP status code
`headers`	Response headers
`config`	Request configuration

Error Handling in Axios

Error handling is extremely important in real-world applications.

Example

try {
  const response = await axios.get(url);
} catch (error) {
  if (error.response) {
    console.log(error.response.status);
    console.log(error.response.data);
  } else {
    console.log(error.message);
  }
}

What Are Axios Interceptors?

Interceptors allow developers to run code before requests or responses are handled.

They are commonly used for:

Authentication tokens
Logging
Global error handling

Request Interceptor Example

axios.interceptors.request.use(
  (config) => {
    config.headers.Authorization = "Bearer token";
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

Response Interceptor Example

axios.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if (error.response.status === 401) {
      console.log("Unauthorized");
    }

    return Promise.reject(error);
  }
);

Advantages of Axios

Easy to Use

Axios has beginner-friendly syntax.

Automatic JSON Parsing

No need for manual conversion.

Better Error Handling

Handles errors clearly.

Supports Older Browsers

Better compatibility than Fetch in some environments.

Request Timeout

Axios supports request timeout configuration.

axios.get(url, {
  timeout: 5000,
});

Disadvantages of Axios

Even though Axios is powerful, it has a few disadvantages.

Extra Dependency

You need to install an external package.

Slightly Larger Bundle Size

Compared to the native Fetch API.

Sometimes Overkill

For very small projects, Fetch may be enough.

Best Practices When Using Axios in React

1. Create a Separate Axios Instance

Instead of repeating the base URL everywhere:

import axios from "axios";

const api = axios.create({
  baseURL: "https://api.example.com",
});

export default api;

2. Store API Logic Separately

Avoid placing API calls directly inside components.

Good structure:

src/
 ├── api/
 │    └── users.js
 ├── components/
 └── pages/

3. Handle Errors Properly

Always use:

try/catch
loading states
user-friendly error messages

4. Use Environment Variables

Never hardcode API URLs.

Example:

process.env.REACT_APP_API_URL

Real-World Use Cases of Axios

Axios is commonly used in:

Authentication systems
E-commerce websites
Social media apps
Dashboard applications
Admin panels
Chat applications

Almost every React application that communicates with a backend can benefit from Axios.

Axios vs Fetch API

Feature	Axios	Fetch
JSON Parsing	Automatic	Manual
Error Handling	Better	Basic
Interceptors	Yes	No
Request Cancellation	Yes	Limited
Built into Browser	No	Yes
Simpler Syntax	Yes	Moderate

Conclusion

And that wraps up Episode 7 of our series — “Let’s Master React Hooks Together.”

In this episode, we explored one of the most important skills every React developer must learn: handling API requests with Axios.

We covered:

What Axios is
Why developers love it
How requests work
Async/Await handling
Error management
Interceptors
Best practices for scalable applications

Understanding Axios is a major step forward because real-world React applications are heavily dependent on backend communication. Once you become comfortable with Axios, building dynamic and data-driven applications becomes much easier and more professional.

As we continue this series, we’ll keep moving deeper into practical React concepts that developers use in real production applications every day.

So stay tuned for the next episode of “Let’s Master React Hooks Together” — and keep building, keep learning, and keep coding consistently.