Migrate to xior from axios

Xior is a library based on fetch that supports plugins, offers an API similar to axios, and is lightweight in size.

Do you use axios or fetch?

If you are already familiar with axios, using xior will be straightforward.

Axios size

https://pkg-size.dev/axios

Xior size

https://pkg-size.dev/xior

Why xior instead of axios?

Update: axios supports fetch now.

One significant reason is that axios doesn’t support edge runtime and Cloudflare Worker environments.

In Cloudflare Worker or Next.js’s middleware.js file, axios will throw an error: TypeError: adapter is not a function.

Another reason is that xior is more lightweight and supports plugins and if you want use modern features like fetch, xior is better choice.

But if you need these features, axios still a better choice:

• Axios support proxy feature in Node.js (Since xior@0.7.0, it supports proxy too through different fetch implementations)
• Axios use XMLHttpRequest thats means support old browser (You can use fetch polyfill for supporting old browser)
• Axios exists over 10 years means more stable and more features support. (But xior.js is the modern axios :)

Getting Started

Let’s install and write some example to get started.

Installing

# npm
npm install xior

# pnpm
pnpm add xior

# bun
bun add xior

# yarn
yarn add xior

GET method

import axios from 'xior';

axios
  .get('/user', {
    params: {
      ID: 12345,
    },
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // always executed
  });

POST method

import axios from 'xior';

axios
  .post(
    '/user',
    // body
    {
      username: 'test',
      nickname: 'j',
    },
    // options
    {
      params: {
        ID: 12345,
      },
    }
  )
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // always executed
  });

Creating instance

import axios from 'xior';

const http = axios.create({ baseURL: 'https://example.com/' });

Using Inteceptors

Request interceptors:

import axios from 'xior';

axios.interceptors.request.use((config) => {
  const token = localStorage.getItem('LOGIN_TOKEN');
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`;
  }
  return config;
});

Response interceptors:

import axios from 'xior';

axios.interceptors.response.use(
  (result) => {
    console.log(result.status, result.data, result.config, result.resposne, result.headers);
    return result;
  },
  (error) => {
    if (error?.response?.status === 401) {
      localStorage.removeItem('LOGIN_TOKEN');
    }
    return Promise.reject(error);
  }
);

Using Plugins

Xior built-in many useful plugins, and you could easily create your own custom plugins.

Use progress plugin:

import axios from 'xior';
import uploadDownloadProgressPlugin from 'xior/plugins/progress';

axios.plugins.use(uploadDownloadProgressPlugin());

const formData = FormData();
formData.append('file', fileObject);
formData.append('field1', 'val1');
formData.append('field2', 'val2');

axios.post('/upload', formData, {
  // simulate upload progress to 99% in 10 seconds, default is 5 seconds
  progressDuration: 10 * 1000,
  onUploadProgress(e) {
    console.log(`Upload progress: ${e.progress}%`);
  },
  // onDownloadProgress(e) {
  //   console.log(`Download progress: ${e.progress}%`);
  // },
});

Create custom plugin:

import axios from 'xior';

axios.plugins.use(function logPlugin(adapter) {
  return async (config) => {
    const start = Date.now();
    const res = await adapter(config);
    console.log('%s %s %s take %sms', config.method, config.url, res.status, Date.now() - start);
    return res;
  };
});

There are lot more plugins and details you maybe interesting, please check xior on GitHub