Alova.JS - Stop building request logic. Start shipping features.

# No-BS comparisonReact Query gives you primitives. alova gives you the finished strategy.The same paginated list — side by side. No framework war, just less code.

React Query / hand-written~25 lines

const [page, setPage] = useState(1);
const queryClient = useQueryClient();

const { data, isPreviousData } = useQuery({
  queryKey: ['todos', page],
  queryFn: () => fetch(`/api/todos?page=${page}`)
    .then(r => r.json()),
  keepPreviousData: true
});

// manual pre-fetch of next page
useEffect(() => {
  queryClient.prefetchQuery({
    queryKey: ['todos', page + 1],
    queryFn: () => fetch(`/api/todos?page=${page + 1}`)
      .then(r => r.json())
  });
}, [page, data]);

// manual delete + cache sync
const del = useMutation({
  mutationFn: id => fetch(`/api/todos/${id}`, { method: 'DELETE' }),
  onSuccess: () => queryClient.invalidateQueries(['todos'])
});

// manual add + cache sync
const add = useMutation({
  mutationFn: body => fetch('/api/todos', {
    method: 'POST', body: JSON.stringify(body)
  }),
  onSuccess: () => queryClient.invalidateQueries(['todos'])
});

alova · usePagination~5 lines

const todoList = (page, size) =>
  alova.Get('/api/todos', { params: { page, size } });
const { loading, data, page, pageSize, pageCount, total } =
  usePagination(todoList);
// auto paging · preload · add/remove sync

# Request StrategyStop writing request logic. Use a strategy.alova provides 20+ request strategies — finished business modules for client, server, and cross-component scenarios. Pick one, ship faster.

Client strategies

Built-in hooks that replace the boilerplate you would otherwise hand-write with React Query or axios.

Pagination RequestClient

Learn more

Automatically manage paging data, data preloading, reduce unnecessary data refresh, improve fluency by 300%, and reduce coding difficulty by 50%

const todoList = (page, size) =>
  alova.Get('/todos', { params: { page, size } });
const { loading, data, page, pageSize, pageCount, total } =
  usePagination(todoList);

Watch RequestClient

Learn more

send requests immediately by watching states changes, useful in tab switching and condition quering.

useWatcher(
  () => alova.Get(`/rewards/${activeKey}`),
  [activeKey],
  {
    debounce: [500, 0]
  }
)

Fetch DataClient

Learn more

Preload data to display view faster, or re-fetch data across components.

const { fetching, error, fetch } = useFetcher()
fetch(alova.Get('/todo/1'))

Token authenticationClient

Learn more

Global interceptor that supports silent token refresh, as well as providing unified management of token-based login, logout, token assignment and token refresh.

const { onAuthRequired, onResponseRefreshToken } = createServerTokenAuthentication({
  refreshTokenOnError: {
    isExpired: res => res.status === 401,
    handler: async () => {
      const { token, refresh_token } = await refreshToken()
      localStorage.setItem('token', token)
      localStorage.setItem('refresh_token', refresh_token)
    }
  }
})

const alovaInstance = createAlova({
  beforeRequest: onAuthRequired(),
  responded: onResponseRefreshToken()
})

Form SubmissionClient

Learn more

Automatically manage form data, it allow you implement quickly various of forms.

Auto refresh dataClient

Learn more

Automatically refresh data through the events of browser, always display the newest data.

Server strategies

Server-side control — retry, rate limiting, atomic requests and more — without adding middleware.

Retry RequestServer

Learn more

Using it on important requests can improve their stability.

const res = await retry(alova.Post('/api/order'), {
  retry: 3,
  backoff: {
    delay: 1000,
    multiplier: 2
  }
})

Rate LimitServer

Learn more

Limit the request rate within a certain period of time.

const limit = createRateLimiter({
  points: 4,
  duration: 60 * 1000
})
const orderRes = await limit(
  alova.Get('/api/order')
)

Atomize RequestsServer

Learn more

Guarantee request atomicity in multi-process environments with a distributed lock — no hand-written locking code.

import { atomize } from 'alova/server';

// a distributed lock keeps the request atomic
const res = await atomize(
  alova.Get('/api/user'),
  {
    channel: 'user_lock',
    timeout: 5000
  }
)

Cross-component, zero wiring

Trigger and sync requests across any component — no prop drilling, no global store.

Action DelegationTrigger, abort and share requests across components and modules — no extra state plumbing.Seamless Data InteractionKeep shared data consistent across components with automatic state synchronization.

Learn total 20+ strategies

Client strategies Server strategies

# OpenAPI → Code · powered by wormaOne API spec. From human to AI.worma is an independent OpenAPI code-generation tool that works out-of-the-box with alova. Turn one API spec into type-safe runtime code, TS types, docs, and AI knowledge — get API hints, hover-docs, and one-click code insertion right in your editor. (Also supports axios, ky, and fetch.)

worma website →

# FlexibleRuns in any JS environment with any request toolUse hooks originated from functional components, but alova innovatively made it compatible with options and class-style UI frameworks, which means that alova's use hooks are almost not restricted by JS environments and UI frameworks, and can be used together with your familiar request tools.

Vue3 React Svelte Vue options Next Nuxt nodejs bun deno Sveltekit Solid Mini program🇨🇳uniapp Taro Angular Preact Qwik Lit Stencil

Fetch Api Axios XMLHttpRequest GraphQL SuperAgent

# Trusted & honestBuilt for real apps — and honest about when not to use it.

GitHub stars1000+dependent repos on GitHub ↗

15+frameworks supported

client + serverone library, both sides

MITfree & open source

When should you NOT use alova?

Stick with React Query / axios when

You only need simple CRUD + basic caching
Your team already standardised on one of them
The app is small and request logic is minimal

alova wins when

You want 70% less request code out of the box
Complex admin / BFF / cross-platform / server-side control
You need built-in strategies (pagination, auth, retry, SSE…)

Join the communityUsed in production by real teamsOpen source projects dependent on alova

Scott HuCreator of alova

Request libs like fetch and axios make requests very simple, react-query and swr further reduce the template code of requests. But what alova aims to do is to provide extreme API consumption efficiency, eliminating almost all of your request work and achieving more efficient Client-Server data interaction.

ProddyThe author of EMS-ESP

I'm loving this library and slowly migrating my code from Axios to Alova.

0x1EC10DDeveloper

Alova is really meticulous. When I read the documents, every point was a pain point and solved many problems.

Ah jungAuthor of Naive Admin

The alovajs is nice. I plan to switch our products to alovajs uniformly

Alova teamMeet the core members

Scott Hu

MeetinaXD

czhlin

Try it NOWTake your development efficiency to the next level

Getting Started Examples