What is Axios? A Practical HTTP Client for Modern Apps

What is Axios?

A Promise-based HTTP client that works in both the browser and Node.js. Compared to fetch it adds automatic JSON parsing, shortcuts for GET/POST/PUT/DELETE and a more robust error model. It's one of the most popular choices for an app's API layer.

• Promise-based — async/await friendly
• Single API for browser + Node.js
• Automatic JSON conversion
• Plays nicely with REST APIs

Why Use Axios?

fetch is standard, but as projects grow you end up repeating configuration. Axios centralizes that configuration through instances and interceptors.

• Cleaner syntax — short and readable
• Automatic JSON parsing
• Request/response interceptors
• Built-in timeout management
• Great fit for REST APIs

Installation

Add it with one command as a runtime dependency.

npm install axios

Basic GET Request

axios.get returns a single Promise; response.data already contains parsed data.

import axios from "axios";

const fetchUsers = async () => {
  const res = await axios.get("/api/users");
  return res.data;
};

POST Request

The second argument is the body; Axios serializes the object to JSON and sets the right Content-Type header.

await axios.post("/api/users", {
  name: "Ada",
  email: "ada@dev.com",
});

GET with TypeScript

Axios accepts generic types. That makes response.data the model you expect instead of any, giving your components autocomplete and type safety.

import axios from "axios";

type User = {
  id: string;
  name: string;
  email: string;
};

export async function getUsers() {
  const res = await axios.get<User[]>("/api/users");
  return res.data;
}

const users = await getUsers();
users[0].email; // string

POST with TypeScript

Type the request body and response model separately. This is especially useful for forms, auth flows and create/update screens where field names drift easily.

import { api } from "@/lib/api";

type CreateUserInput = {
  name: string;
  email: string;
};

type User = CreateUserInput & {
  id: string;
};

export async function createUser(input: CreateUserInput) {
  const res = await api.post<User>("/users", input);
  return res.data;
}

await createUser({
  name: "Ada",
  email: "ada@dev.com",
});

Axios Instance (IMPORTANT)

Collect repeated settings into an instance: baseURL, timeout, common headers. Using a single instance everywhere removes configuration drift.

import axios from "axios";

export const api = axios.create({
  baseURL: "https://example.com/api",
  timeout: 5000,
  headers: { Accept: "application/json" },
});

api.get("/users");

Typed API Layer

Instead of spreading raw axios calls across components, write small typed functions. This shape plugs cleanly into React Query, Zustand or server actions.

import { api } from "@/lib/api";

type ApiResponse<T> = {
  data: T;
  message?: string;
};

type User = {
  id: string;
  name: string;
  role: "admin" | "editor" | "viewer";
};

export async function getUser(id: string) {
  const res = await api.get<ApiResponse<User>>(`/users/${id}`);
  return res.data.data;
}

Interceptors

Use interceptors to globally hook into the request/response lifecycle. They're perfect for attaching tokens, central error handling and logging.

api.interceptors.request.use((config) => {
  config.headers.Authorization = `Bearer ${getToken()}`;
  return config;
});

api.interceptors.response.use(
  (response) => response,
  (error) => {
    console.error(error);
    return Promise.reject(error);
  }
);

Error Handling

Unlike fetch, Axios automatically rejects on 4xx/5xx codes. Catch with try/catch and inspect error.response for details.

type ApiError = {
  message: string;
  code?: string;
};

try {
  const res = await api.get("/users");
} catch (err) {
  if (axios.isAxiosError<ApiError>(err)) {
    console.log(err.response?.status, err.response?.data);
  }
}

Request Config

You can override settings on a per-request basis: headers, timeout, params, withCredentials and more.

await api.get("/users", {
  headers: { "X-Trace-Id": "abc" },
  timeout: 2000,
  withCredentials: true,
});

Query Params

The params field accepts an object and appends ?key=value to the URL. For complex shapes you can supply a paramsSerializer.

await api.get("/posts", {
  params: { page: 1, limit: 10 },
});
// → /posts?page=1&limit=10

Use Cases

Where Axios shines:

• Consuming REST APIs
• Authentication flows (token interceptor)
• Typed API services with TypeScript
• Modern frontend frameworks
• Working alongside React Query

Summary

Axios is a strong, flexible library that simplifies HTTP requests. Compared to fetch it offers cleaner syntax, more reliable error handling and better scalability. From small scripts to enterprise apps, it remains the go-to HTTP client of the modern JavaScript ecosystem.