Alova.JS - 极致高效的请求工具集，助你极致高效集成API

请求策略业务开发杀手锏alova提供了20+业务模块，我们称之为请求策略，可以帮你快速实现客户端和服务端应用的业务逻辑开发。

分页请求Client

自动管理分页数据，数据预加载，减少不必要的数据刷新，流畅度提高300%，编码难度降低50%

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

监听请求Client

查看详情

状态变化立即发送请求，这在tabs切换和条件查询中很有用。

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

请求重试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')
)

预加载数据Client

查看详情

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

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

Token身份认证Client

查看详情

支持无感刷新Token的全局拦截器，并提供基于令牌的登录、注销、令牌分配和令牌刷新的统一管理

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

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