Alova.JS - 创新的下一代请求工具

自动生成一边查询一边使用接口在编辑器中快速找到API，甚至在js项目中，也可以使用alova的扩展自动生成的API代码来享受完整的类型提示

请求策略复杂的请求现场杀手锏一行代码实现各种复杂场景中的请求

分页请求Client

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

usePagination((page, size) => totoList(page, size), {
  initialData: {
    total: 0,
    data: []
  },
  initialPage: 1,
  initialPageSize: 10
})

监听请求Client

查看详情

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

useWatcher(
  () => filterTodoList(page, keyword),
  [keyword, page],
  {
    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(getTodoDetail)

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