Both make HTTP requests, but they make different trade-offs around defaults, ergonomics, and footprint.

At a glance

Side-by-side

// fetch
const res = await fetch('/api/user', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Alice' }),
});
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();

// axios
const { data } = await axios.post('/api/user', { name: 'Alice' });

Axios is shorter because it inferred Content-Type, serialized the body, rejected on non-2xx, and parsed JSON. Fetch is "explicit > implicit" — each of those is a separate line.

Things fetch makes you remember

1. res.ok check. 404, 500 → fetch resolves. Forgetting to check .ok and calling .json() on an HTML error page gives you a confusing parse error.
2. JSON.stringify the body. Fetch sends [object Object] if you forget.
3. Set Content-Type manually. Fetch doesn't infer it.
4. No timeout. Without an AbortController + setTimeout, a hung request hangs forever.
5. credentials: 'include' for cross-origin cookies (axios has withCredentials: true).

What axios gives you

Interceptors — global request/response middleware (auth injection, error normalization):

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

axios.interceptors.response.use(
  res => res,
  err => {
    if (err.response?.status === 401) refreshToken();
    return Promise.reject(err);
  }
);

Auto-rejecting non-2xx — try/catch is the entire error model; no need to remember res.ok.

Upload progress (XHR-based; fetch needs ReadableStream gymnastics):

axios.post('/upload', file, {
  onUploadProgress: e => console.log(`${(e.loaded / e.total) * 100}%`),
});

What fetch gives you that axios doesn't

• Streams — res.body.getReader() for incremental parsing (great for LLM token streaming).
• Service Worker integration — service workers intercept fetch, not XHR.
• Modern Request/Response objects — composable with Cache API, push API.
• Zero deps — relevant for bundle-size-sensitive apps.

When to pick which

• Greenfield app with React Query / SWR / Tanstack Query: use fetch under the hood; the data-fetching library handles caching, retries, dedup — the historical reasons to reach for axios are absorbed there.
• Lots of legacy code with global interceptors / auth pipelines: stick with axios.
• Need upload progress, file uploads with progress UI: axios is easier (or use XHR directly).
• Streaming responses (LLM tokens, SSE-like): fetch.
• Service workers: fetch.
• Bundle-size-sensitive (landing pages, embeds): fetch.
• Node script / Node backend on Node 18+: fetch is fine; no need for axios anymore.

A small wrapper splits the difference

Most apps end up writing a thin fetch wrapper that adds: JSON convenience, 4xx/5xx rejection, baseURL, auth. That gives you axios-like ergonomics with no dependency.

export async function api(path, opts = {}) {
  const res = await fetch(`${BASE}${path}`, {
    headers: { 'Content-Type': 'application/json', ...opts.headers },
    body: opts.body ? JSON.stringify(opts.body) : undefined,
    ...opts,
  });
  if (!res.ok) throw Object.assign(new Error(res.statusText), { status: res.status });
  return res.headers.get('content-type')?.includes('json') ? res.json() : res.text();
}