Dev.to

Axios vs. Fetch: Which Fetch Wrapper Should I Choose in 2025?

It's 2025, and Axios has supported fetch since v1.7, making it just another fetch wrapper. The Axios package is 35.6KB/Gzip 13.5KB—too big as a fetch wrapper! So, I looked into popular fetch wrappers and found these: wretch ky ofetch The good thing is they are well-known and very small—under 4KB(Gzip). The problem? Each has its own API style. Axios is popular because of its easy-to-use API and powerful interceptors. I wanted a fetch wrapper that works like Axios. Besides these well-known fetch wrappers, there are many others. But after searching, I finally found the perfect one: xior Why Xiorjs? Tiny, with an Axios-like API Built-in nested query parameter encoding Many useful built-in plugins Easy to customize with plugins Supports custom fetch implementations (works with proxies, old browsers, Tauri apps) Size Show me the code import axios, { XiorError as AxiosError, isXiorError as isAxiosError, XiorRequestConfig as AxiosRequestConfig, } from "xior"; export const http = axios.create({ baseURL: "https://exmaple.com/api", }); http.request.interceptors.use((request) => { request.headers["Authorization"] = "your token"; return request; }); http.response.interceptors.use((request) => { request.headers["Authorization"] = "your token"; return request; }); // Or use defaults to set headers http.defaults.headers["Authorization"] = "your token"; // GET requests with nested object http.get("/get-data", { params: { filter: { site: undefined, "url:is": "something", }, }, }); // POST requests http.post( "/post-action", { payload: { a: 1, b: 2 } }, { params: { filter: { site: undefined, "url:is": "something", }, }, }, ); Xior is written in TypeScript, used in real projects, and the author fixes issues fast!

Mar 10, 2025 - 01:40

Axios vs. Fetch: Which Fetch Wrapper Should I Choose in 2025?

It's 2025, and Axios has supported fetch since v1.7, making it just another fetch wrapper.

The Axios package is 35.6KB/Gzip 13.5KB—too big as a fetch wrapper!

So, I looked into popular fetch wrappers and found these:

wretch
ky
ofetch

The good thing is they are well-known and very small—under 4KB(Gzip). The problem? Each has its own API style.

Axios is popular because of its easy-to-use API and powerful interceptors.

I wanted a fetch wrapper that works like Axios.

Besides these well-known fetch wrappers, there are many others. But after searching, I finally found the perfect one: xior

Why Xiorjs?

Tiny, with an Axios-like API
Built-in nested query parameter encoding
Many useful built-in plugins
Easy to customize with plugins
Supports custom fetch implementations (works with proxies, old browsers, Tauri apps)

Size

Show me the code

import axios, {
  XiorError as AxiosError,
  isXiorError as isAxiosError,
  XiorRequestConfig as AxiosRequestConfig,
} from "xior";

export const http = axios.create({
  baseURL: "https://exmaple.com/api",
});

http.request.interceptors.use((request) => {
  request.headers["Authorization"] = "your token";
  return request;
});

http.response.interceptors.use((request) => {
  request.headers["Authorization"] = "your token";
  return request;
});

// Or use defaults to set headers
http.defaults.headers["Authorization"] = "your token";

// GET requests with nested object
http.get("/get-data", {
  params: {
    filter: {
      site: undefined,
      "url:is": "something",
    },
  },
});

// POST requests
http.post(
  "/post-action",
  { payload: { a: 1, b: 2 } },
  {
    params: {
      filter: {
        site: undefined,
        "url:is": "something",
      },
    },
  },
);

Xior is written in TypeScript, used in real projects, and the author fixes issues fast!