Is It Time to Ditch Axios? Exploring Alova.JS as a Lightweight Alternative

What is Alova.JS?

Alova.JS is a lightweight HTTP request library that enables declarative handling of complex request scenarios. It supports multiple request adapters, allowing seamless integration with Axios, fetch, or XMLHttpRequest.

Key features

Cross‑framework support (Vue, React, Svelte, etc.)

API design similar to Axios for quick onboarding

Built‑in high‑performance request strategy

Bundle size roughly 30% of Axios (often <4 KB after tree‑shaking)

Compatible with any request library (Axios, superagent, fetch)

Multiple data‑caching modes to improve performance and reduce server load

Extensible via custom request adapters, storage adapters, middleware, and state hooks

SSR support

Request sharing to prevent duplicate concurrent requests

Data pre‑fetching for faster UI rendering

Automatic request state management

Full TypeScript type definitions

Comparison with Axios

API design : Alova.JS offers a cleaner, more intuitive API.

Size and performance : Smaller bundle size leads to faster load and lower runtime overhead.

Community : Newer but growing rapidly.

Installation adapters

Alova.JS provides several adapters. Install the required ones with npm:

Mock data adapter

# Install mock data adapter
npm install alova @alova/mock --save

Fetch adapter (built‑in, no extra installation required)

# Fetch adapter requires no additional installation

XMLHttpRequest adapter

# Install XMLHttpRequest adapter
npm install alova @alova/adapter-xhr --save

Axios adapter

# Install Axios adapter
npm install alova @alova/adapter-axios axios --save

Uniapp adapter (Vue 3 only)

# Install Uniapp adapter
npm install alova @alova/adapter-uniapp @alova/shared --save

Taro adapter (React 16.8+ / Vue 3)

# Install Taro adapter
npm install alova @alova/adapter-taro --save

Creating an Alova instance

import { createAlova } from 'alova';
import { axiosRequestAdapter } from '@alova/adapter-axios';

const alovaInst = createAlova({
  requestAdapter: axiosRequestAdapter()
});

Sending requests

Requests are defined similarly to Axios methods:

const list = () =>
  alovaInst.Get('/list', {
    paramsSerializer: params => Qs.stringify(params, { arrayFormat: 'brackets' })
  });

const { loading, data } = useRequest(list);

File upload

const uploadFile = imageFile => {
  const formData = new FormData();
  formData.append('file', imageFile);
  return alovaInst.Post('/uploadImg', formData);
};

const { loading, data, uploading, send: sendUpload } = useRequest(uploadFile, { immediate: false });

const handleImageChoose = ({ target }) => {
  sendUpload(target.files[0]);
};

File download

const downloadFile = () =>
  alovaInst.Get('/bigImage.jpg', { responseType: 'blob' });

const { loading, data, downloading, send, onSuccess } = useRequest(downloadFile, { immediate: false });

onSuccess(({ data: imageBlob }) => {
  const anchor = document.createElement('a');
  anchor.href = URL.createObjectURL(imageBlob);
  anchor.download = 'image.jpg';
  anchor.click();
  URL.revokeObjectURL(anchor.href);
});

Custom Axios instance

const customAxios = axios.create({
  // custom configuration
});

const alovaInst = createAlova({
  requestAdapter: axiosRequestAdapter({ axios: customAxios })
});

Mock adapter compatibility

When using the mock adapter with the Axios adapter, mock responses must conform to AxiosResponse and errors to AxiosError:

import { defineMock, createAlovaMockAdapter } from '@alova/mock';
import { axiosRequestAdapter, axiosMockResponse } from '@alova/adapter-axios';

const mocks = defineMock({
  // mock definitions
});

export default createAlovaMockAdapter([mocks], {
  httpAdapter: axiosRequestAdapter(),
  ...axiosMockResponse
});

export const alovaInst = createAlova({
  requestAdapter: process.env.NODE_ENV === 'development' ? mockAdapter : axiosRequestAdapter()
});

TypeScript support

The Axios adapter provides full type compatibility. Method configuration types are derived from AxiosRequestConfig with conflicting properties omitted:

export type AlovaAxiosRequestConfig = Omit<
  AxiosRequestConfig,
  | 'url'
  | 'method'
  | 'baseURL'
  | 'headers'
  | 'params'
  | 'data'
  | 'timeout'
  | 'cancelToken'
  | 'signal'
  | 'onUploadProgress'
  | 'onDownloadProgress'
>;

Responses are typed as AxiosResponse. A typical global response handler extracts response.data:

const alovaInst = createAlova({
  baseURL: 'https://api.alovajs.org',
  requestAdapter: axiosRequestAdapter(),
  responded(response) {
    return response.data;
  }
});

Errors for non‑2xx/3xx status codes are instances of AxiosError, which can be captured in a global error callback:

const alovaInst = createAlova({
  baseURL: 'https://api.alovajs.org',
  requestAdapter: axiosRequestAdapter(),
  responded: {
    onSuccess(response) {
      return response.data;
    },
    onError(err: AxiosError) {
      // handle error
    }
  }
});