Axios vs Fetch | React Tutorial

In this tutorial, you will learn how Axios and Fetch differ, when to choose each one, and how those differences matter in real world React 19 applications.

This is not a theoretical comparison. We will focus on practical tradeoffs that affect everyday development.

What We Will Learn

What Fetch is and what it provides out of the box
What Axios adds on top of Fetch
Key differences in API design and behavior
Error handling differences that surprise beginners
When Fetch is enough and when Axios is worth it

By the end, you will know exactly which tool to reach for in different scenarios.

What Is Fetch

Fetch is a built in web API available in browsers and modern runtimes.

It is:

Native
Promise based
Lightweight
Standardized

You do not install anything to use it.

Basic Fetch Example

// lib/get-posts.ts
export async function getPosts() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts")
 
  if (!res.ok) {
    throw new Error("Failed to fetch posts")
  }
 
  return res.json()
}

This pattern is extremely common in React 19 apps.

What Is Axios

Axios is a third party HTTP client built on top of XMLHttpRequest or Fetch depending on the environment.

It provides:

Automatic JSON parsing
Request and response interceptors
Built in timeout handling
Automatic error throwing for non 2xx responses

Axios must be installed and configured.

Side by Side Comparison

Fetch

const res = await fetch("/api/user")
 
if (!res.ok) {
  throw new Error("Request failed")
}
 
const data = await res.json()

Axios

import axios from "axios"
 
const { data } = await axios.get("/api/user")

Axios looks cleaner, but that simplicity hides important behavior differences.

Error Handling Differences (Very Important)

Fetch Does Not Throw on HTTP Errors

Fetch only rejects on network errors.

This means:

are all considered successful Promises unless you check res.ok.

This is why you always see this pattern:

if (!res.ok) {
  throw new Error("Something went wrong")
}

Axios Automatically Throws

Axios rejects the Promise for non 2xx responses.

try {
  const { data } = await axios.get("/api/user")
} catch (error) {
  // HTTP errors land here automatically
}

This is convenient, but also means less control unless configured carefully.

Why Fetch Works So Well with React 19

React 19 embraces explicit data boundaries.

Fetch pairs perfectly with:

use(promise)
Suspense
Error boundaries

Example:

// components/user.tsx
import { use } from "react"
import { getUser } from "../lib/get-user"
 
export function User() {
  const user = use(getUser())
  return <p>{user.name}</p>
}

Because you manually throw errors with Fetch:

Suspense handles loading
Error boundaries handle failures
Nothing is hidden

This explicitness is a feature, not a drawback.

Axios in Real World Apps

Axios shines when you need:

Global request configuration
Auth token injection
Request retries
Interceptors for logging or metrics
Complex enterprise APIs

Example interceptor:

axios.interceptors.request.use((config) => {
  config.headers.Authorization = "Bearer token"
  return config
})

This can reduce duplication in large applications.

Downsides of Axios

Axios introduces:

Extra dependency
Larger bundle size
Hidden behavior
Less alignment with web standards

In React 19 apps that rely on Suspense and streaming, this abstraction is often unnecessary.

Fetch Is Not “Too Low Level”

A common misconception is that Fetch is primitive.

In reality:

Fetch is composable
Fetch is explicit
Fetch works naturally with async rendering

Most Axios features can be implemented cleanly with small helper functions.

When to Choose Fetch

Choose Fetch when:

You are using React 19 and use
You rely on Suspense and error boundaries
You want full control over errors
You prefer native APIs
Your app is small to medium sized

Fetch is the default choice for modern React.

When to Choose Axios

Choose Axios when:

You have many APIs with shared behavior
You need interceptors everywhere
You are working in a large enterprise codebase
You want built in timeouts and retries

Axios is a productivity tool, not a requirement.

A Practical Rule of Thumb

Start with Fetch
Add Axios only if repetition becomes painful

In React 19, Fetch aligns better with how React wants you to think about data.

Conclusion

Axios and Fetch are both valid tools, but they serve different philosophies.

Fetch is explicit, standard, and fits naturally into React 19’s Suspense driven model. Axios is convenient, abstracted, and powerful for complex setups.

If you are building modern React apps today, Fetch should be your default. Axios becomes a choice, not a necessity.