Alova.JS - 少写请求代码，多做业务功能

直观对比React Query 提供基础构件，alova 提供完整方案同一个分页列表，并排对比；不谈孰优孰劣，只比代码量。

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

请求策略别再手写请求逻辑，直接使用策略alova 提供 20+ 请求策略——面向客户端、服务端、跨组件场景的完整业务模块。选一个，马上上线。

客户端策略

内置的 hooks，替代你在 React Query / axios 里手写的样板代码。

分页请求Client

查看详情

自动管理分页数据、预加载下一页并减少无效刷新，流畅度提升 300%，编码量减少 50%。

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

监听请求Client

查看详情

状态变化立即发送请求，这在标签页切换与条件查询中尤为实用。

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

预加载数据Client

查看详情

预加载数据以更快地显示视图，或跨组件重新拉取数据

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

Token身份认证Client

查看详情

支持无感刷新 Token 的全局拦截器，并统一管理基于令牌的登录、登出、令牌分配与刷新。

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()
})

表单提交Client

查看详情

自动管理表单数据，让你快速实现各种表单功能

自动刷新数据Client

查看详情

通过浏览器事件自动刷新数据，界面始终显示最新数据

服务端策略

服务端控制——重试、限流、原子化请求等——无需额外中间件。

请求重试Server

查看详情

在重要的请求上使用它，可以提高请求的稳定性

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

请求速率限制Server

查看详情

在限定时间内控制请求频率。

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

原子化请求Server

查看详情

在多进程环境下，用分布式锁保证请求的原子性——无需手写加锁逻辑。

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
  }
)

跨组件，免接线

在任意组件中触发并同步请求——无需层层传递 props，也无需引入全局状态管理。

操作委派跨组件触发、中止和共享请求——无需额外状态管理。无感数据交互自动状态同步，让跨组件共享数据保持一致。

查看全部 20+ 个请求策略

客户端策略服务端策略

OpenAPI 生成代码 · 由 worma 驱动一份 OpenAPI 规范，从人类到 AIworma 是一个独立的 OpenAPI 代码生成工具，对 alova 开箱即用。只要有一份接口规范，它就能生成类型安全的运行时代码、TypeScript 类型、文档和 AI 知识——在编辑器里直接获得接口提示、悬浮查看文档，还能一键插入调用代码。（同时也支持 axios、ky 与 fetch。）

前往 worma 官网 →