Why Alova.JS Offers a Lighter, Simpler Alternative to Axios

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 integration with axios, fetch, or XMLHttpRequest.

Features

Cross‑framework support : works with Vue, React, Svelte, etc.

Concise API design : similar to axios, enabling quick onboarding.

High‑performance request strategy : out‑of‑the‑box optimizations improve response speed.

Small size : roughly 30% of axios, reducing bundle impact.

High flexibility : compatible with any request library such as axios, superagent, or fetch‑api.

Multiple data caching modes : improve request performance and lower server load.

Rich extension capabilities : custom request adapters, storage adapters, middleware, and state hooks.

SSR support : usable on the server side.

Request sharing : avoids duplicate concurrent requests.

Data pre‑fetching : enables faster data visibility.

Automatic state management : manages request state without manual code.

Interactive documentation and examples : extensive docs for rapid learning.

TypeScript support : full type definitions.

Tree‑shaking support : production bundle often under 4 KB.

Comparison with axios

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

Size and performance : smaller bundle and faster loading.

Ecosystem and community : newer but rapidly growing community.

Reasons to consider dropping axios

Smaller size : critical for mobile and performance‑sensitive apps.

Cleaner API : reduces code writing and maintenance effort.

High‑performance request strategy : improves user experience.

Usage

Installation

Alova.JS provides multiple adapters; choose the one that fits the project.

Common adapters and their installation commands:

Mock data adapter

The mock plugin is an Alova request adapter that offers fine‑grained control over mock data scope (global, group, or individual endpoint).

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

Fetch adapter

The fetch adapter is built‑in; no additional installation is required.

# Fetch adapter requires no additional installation; use directly

XMLHttpRequest adapter

Enables Alova.JS in environments without fetch support.

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

Axios adapter

Leverages axios’s features for sending HTTP requests and handling responses.

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

Uniapp adapter

Supports Vue 3‑based uniapp applications.

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

Taro adapter

Supports React 16.8+ and Vue 3 versions of Taro applications.

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

Create Alova instance

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

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

Send request

const list = () =>
  alovaInst.Get('/list', {
    paramsSerializer: params => {
      return 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);
});

const handleImageDownload = () => {
  send();
};

Custom axios instance

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

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

Mock adapter compatibility

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

Method configuration

/** axios request configuration parameters
 *  Conflicts with method generic options are removed */
export type AlovaAxiosRequestConfig = Omit<
  AxiosRequestConfig,
  | 'url'
  | 'method'
  | 'baseURL'
  | 'headers'
  | 'params'
  | 'data'
  | 'timeout'
  | 'cancelToken'
  | 'signal'
  | 'onUploadProgress'
  | 'onDownloadProgress'
>;

Response data

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

Error handling

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