xior

Xior

An Axios replacement request library use fetch, and more.

Features:

• ✅ Similiar axios.create / axios.interceptors.request.use / axios.interceptors.response.use / .get/post/put/patch/delete/head/options 🫡
• ✅ Use fetch 🔥
• ✅ Lightweight ~5KB, Gzip ~2.0KB 🚀
• ✅ Support timeout and cancel request 🤙
• ✅ Unit tests 👊
• ✅ 100% Write in TypeScript 💪
• Plugins support: error retry plugin, cache plugin, avoid repeat requests plugin 😎

Getting Started

import xior from 'xior';

const http = xior.create({ baseURL: 'https://exmaple.com', timeout: 120 * 1000 });

http.interceptors.request.use((config) => {
  // do something
  return config;
});

http.interceptors.response.use((result) => {
  const { config, response, data } = result;
  // do something
  return result;
});

async function getList() {
  const { data } = await http.get('/list', { params: { page: 1, perPage: 20 } });
  return data;
}

async function create() {
  const { data } = await http.post(
    '/create',
    { name: 'test', desc: 'foobar..foobar' },
    { params: { redirect: '/list' } }
  );
  return data;
}

Custom plugin

xior.plugins.use(async (request, response, error) => {
  const inRequestPhase = !response;
  const inResponsePhase = Boolean(response);
  const isError = Boolean(error);

  if (isError) {
    //
  }
  if (inRequestPhase) {
    //
  } else if (inResponsePhase) {
    //
  }
});

FAQ

• Is xior 100% compatiable with axios? No.
• How to cancel request? Ok
• How to upload files? Ok
• How to show upload progress like axios? Don't support.
• What about response of 'stream' | 'document' | 'arraybuffer' | 'blob' ? Use responseType: 'stream' | 'document' | 'arraybuffer' | 'blob', will return original { response }
• More: Anything else? create new issues let me know!

TODOs

• Merge configs, like headers, currently will just replace
• Upload tests
• Code refactor and cleanup
• Plugins support

Changelog

v0.0.1 2024-02-15

🐣