fetch vs axios: What Differs?

Axios is built on top of the fetch equivalent in the browser, and it adds the things that fetch leaves to you. There are six differences worth knowing.

// Both libraries share the same underlying idea: a promise of a response.
// Here is the raw fetch shape.
async function fetchJson(url) {
  const response = await fetch(url, {
    method: "GET",
    headers: { Accept: "application/json" },
  });

  if (!response.ok) {
    throw new Error(`Request failed with status ${response.status}`);
  }

  return response.json();
}

// The same idea with axios, which throws on a bad status by default:
// const response = await axios.get(url, { timeout: 2000 });
// console.log(response.data);

// And the error shapes are different.
try {
  throw new Error("Request failed with status 500");
} catch (err) {
  console.log(err.message);   // "Request failed with status 500"
}

console.log(typeof fetchJson);   // "function"

Error handling. Fetch resolves for any response, including a 404 or a 500, so you have to check the ok property yourself. Axios rejects by default when the status is outside the two hundreds, and the error it throws already carries the response, the status and the data.

Timeouts. Fetch has no timeout option. You have to build one with an abort controller and race it against the request. Axios takes a timeout directly.

Interceptors. Axios lets you attach a handler that runs before every request and after every response, which is where you put authentication headers, logging and error normalisation. Fetch has no equivalent, so you write a wrapper function instead.

Data handling. Axios serialises a plain object into a JSON body and sets the content type for you. Fetch does not, so you call the json method on the request options and set the header yourself. The other side of the difference is that axios parses JSON responses automatically, while fetch gives you the raw body to parse.

Cancellation. Fetch uses the standard abort signal, which is a platform feature. Axios has its own cancellation object as well as supporting the abort signal, so it works either way.

Size. Fetch is built into the platform, so it costs nothing to download. Axios is a dependency, roughly fifteen kilobytes compressed.

The option objects look similar, and the differences are instructive.

// The fetch option object.
const fetchOptions = {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ name: "Ada" }),
  // credentials: "include",
  // signal: controller.signal,
  // mode: "cors",
};

// The axios option object.
const axiosOptions = {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  data: { name: "Ada" },
  // timeout: 2000,
  // withCredentials: true,
  // responseType: "json",
};

console.log(fetchOptions.body);            // "{\"name\":\"Ada\"}"
console.log(axiosOptions.data.name);       // "Ada"
console.log(typeof axiosOptions.data);     // "object"

The body difference is the one that catches people out. Axios takes an object and serialises it for you, while fetch needs the string, so you have to call the JSON stringify method and set the content type header yourself. Forget the header and the server receives a JSON string labelled as plain text, which is a confusing bug to track down.

The credentials option in fetch maps onto the withCredentials option in axios, and both control whether cookies and authentication headers are sent to a different origin. The default behaviour differs between the two for cross-site requests, which is a common source of a cookie that works locally and fails in production.

The other differences in the comments are worth recognising. The timeout option exists only in axios. The responseType option tells axios how to interpret the body, and it matters for binary data. And the mode option in fetch controls cross-origin behaviour, which is the modern replacement for the old JSONP tricks.