Axios vs Fetch: Which Is Best for JavaScript HTTP Requests?

Fetch is the better pick for simple requests, and Axios becomes worth installing once the job calls for interceptors or automatic JSON handling. Fetch costs your bundle nothing, since browsers and Node.js have it built in. Axios, for its part, adds built-in timeouts and upload progress.

Modern Node.js now ships Fetch natively, which ends the old routine of installing an external package for basic backend network calls. Axios, on the other hand, is still a third-party library you install yourself – yet both of them handle HTTP requests reliably across almost any modern execution environment.

What Is the Fetch API?

The Fetch API is a built-in, promise-based interface for making API requests in modern browsers and Node.js. It became a default feature in Node 18 and reached full stability in Node 21. Calling fetch returns a Response object that you have to parse manually to access the actual data.

const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
const data = await response.json();
console.log(data);

What Is Axios?

Axios, often called axios js, is a popular third-party HTTP client for browsers and Node.js that simplifies repetitive networking tasks. By default, axios HTTP requests rely on XMLHttpRequest in the browser and the core HTTP module in Node, though the maintainers introduced an optional fetch adapter in version 1.7.

npm install axios

import axios from 'axios';

const response = await axios.get('https://jsonplaceholder.typicode.com/todos/1');
console.log(response.data);

Difference Between Axios and Fetch: Quick Comparison

Syntax Differences Between Axios and Fetch

GET Requests

The biggest difference during a standard GET request is how each tool handles the response. Axios automatically parses JSON payloads into response.data, while Fetch requires an extra await response.json() step.

// Fetch
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const users = await response.json();

// Axios
const response = await axios.get('https://jsonplaceholder.typicode.com/users');
const users = response.data;

POST Requests With JSON

When sending JSON data, Axios automatically serializes your object and sets the Content-Type header, so Axios JSON requests need no extra setup. With Fetch, on the other hand, you need to do it manually and specify the content type so the server can process it correctly.

// Fetch
const response = await fetch('https://jsonplaceholder.typicode.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'John', role: 'admin' })
});
const newUser = await response.json();

// Axios
const response = await axios.post('https://jsonplaceholder.typicode.com/users', {
  name: 'John',
  role: 'admin'
});
const newUser = response.data;

Using async/await

Both clients return promises, so you can await either one inside an async function. With Fetch, you await twice: once for the response and once for the parsed body.

// Fetch
async function getUser() {
  const response = await fetch('/user/1');
  return await response.json();
}

// Axios
async function getUser() {
  const response = await axios.get('/user/1');
  return response.data;
}

Error Handling in Axios vs Fetch

Fetch only rejects a promise on network failures. Error status codes like a 404 or 500 response resolve normally, forcing developers to check the response.ok property before processing the data.

const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
if (!response.ok) {
  throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();

Axios automatically rejects the promise for non-2xx status codes. Developers can inspect error.response to view the server payload or error.request if the server never answered. To override this default behavior, supply a custom validateStatus function to resolve promises for specific error codes.

Timeouts and Request Cancellation

With Axios, timeouts come down to a built-in timeout configuration option. Explicit request cancellation is covered too, since it now supports the standard AbortSignal.

Fetch goes through the AbortController interface for cancellation, and since there’s no timeout option, a deadline means passing AbortSignal.timeout() as the signal.

Keep in mind that Axios formally deprecated its older CancelToken pattern, but many older tutorials still teach it.

Interceptors and Reusable Instances

Request and response interceptors come built-in once you install Axios. You can centralize tasks like attaching authentication tokens or logging errors there before promises resolve.

Shared instances with consistent base URLs and header configurations come from the axios.create() method as well. Fetch doesn’t offer that, so you’ll end up writing custom wrapper functions to intercept the arguments.

There are also third-party wrappers like ky and wretch that provide similar interceptor capabilities with a smaller footprint than Axios.

Upload and Download Progress

Axios tracks precise byte counts for large file transfers using built-in onUploadProgress and onDownloadProgress callbacks.

Fetch exposes download progress through a ReadableStream on response.body, which allows developers to measure incoming chunks against the Content-Length header.

However, Fetch currently lacks a practical mechanism to track upload progress.

Axios vs Fetch Performance

Runtime request speeds between Axios and Fetch show no meaningful difference. The measurable difference is bundle size.

Fetch adds 0 KB to an application payload, while Axios 1.21.0 adds about 21 KB minified and gzipped. In Node.js, the built-in Fetch API runs on the undici library, an HTTP client built for Node.js, and request speed comes down to network time either way.

Using a Proxy With Axios and Fetch

Both clients connect to anyIP’s residential and mobile proxies the same way: send requests to portal.anyip.io on port 1080 and log in with your proxy username and password. Targeting options such as country_US go into the username after a comma.

Axios has a built-in proxy option that takes the proxy’s host, port, and login details. Since version 1.16.1, it also tunnels HTTPS requests through the proxy on its own:

import axios from 'axios';

const response = await axios.get('https://api.ipify.org?format=json', {
  proxy: {
    protocol: 'http',
    host: 'portal.anyip.io',
    port: 1080,
    auth: { username: 'user_XXXX,country_US', password: 'PASSWORD' }
  }
});
console.log(response.data);

On Axios versions before 1.16.1, developers typically reach for the https-proxy-agent package to handle HTTPS endpoints, and proxy: false goes in alongside it so Axios doesn’t also apply proxy environment variables:

import axios from 'axios';
import { HttpsProxyAgent } from 'https-proxy-agent';

const agent = new HttpsProxyAgent('http://user_XXXX,country_US:PASSWORD@portal.anyip.io:1080');
const response = await axios.get('https://api.ipify.org?format=json', { httpsAgent: agent, proxy: false });

Fetch lacks a dedicated proxy property. To route requests successfully, import the ProxyAgent from the undici library and pass it to the request as a custom dispatcher.

import { fetch, ProxyAgent } from 'undici';

const dispatcher = new ProxyAgent('http://user_XXXX,country_US:PASSWORD@portal.anyip.io:1080');
const response = await fetch('https://api.ipify.org?format=json', { dispatcher });

On Node.js 22.21 or later, 24, and 26, the built-in fetch() can also use a proxy without installing undici: set HTTPS_PROXY to your proxy URL and start Node with NODE_USE_ENV_PROXY=1. Node still marks this feature as in active development.

Axios vs Fetch in React

Fetching data on mount works with either Fetch or Axios – the call sits inside a useEffect hook in client-side components, whichever you pick. Modern state management tools like TanStack Query and SWR take both as well, and caching and background updates come with them.

Next.js applications favor the native interface because the framework extends the built-in Fetch API with proprietary caching and revalidation options unavailable to third-party clients.

Axios is a strong option for complex enterprise applications coordinating multiple API calls and authenticated endpoints through centralized interceptor logic.

CORS and Cookies

Neither of the two HTTP clients has cross-origin resource-sharing rules of its own, because modern browsing engines enforce the same set on both. Sending cookies across different domains means setting credentials: 'include' in Fetch, and withCredentials: true if you’re on Axios.

The Access-Control-Allow-Origin header is a response header set by the server, not the client. Switching client-side libraries doesn’t change this: only the server can allow a cross-origin request.

Security and Dependency Considerations

In the browser, Axios can read an XSRF token from a cookie and send it back in a request header. Doing so helps protect against cross-site request forgery if your server issues and checks that token, though Axios itself comes with the same baseline supply-chain risk as any external dependency.

For example, on March 31, 2026, attackers took over the lead maintainer’s npm account and published two malicious Axios versions, 1.14.1 and 0.30.4. The npm registry removed the malicious packages within hours.

Axios or Fetch: Which Should You Choose?

Choose Fetch If…

You want the smallest bundle size you can get, and none of the maintenance overhead external dependencies bring. Straightforward network calls, the kind that need no complex global error handling or automatic payload transformations, are what the built-in Fetch API is great for.

Choose Axios If…

You’re building applications that need central request and response interceptors to manage authentication tokens and format errors consistently.

Axios is also the better choice if your application needs to track upload progress events for large data transfers or if automatic JSON parsing simplifies your codebase.