Alova.JS - 工作流精简的下一代请求工具

更先进的openAPI方案消除中间的API文档alova的devtools能够同时生成API调用代码，以及每个API的TypeScript类型和详尽的文档。即使在JavaScript项目中，也能享受到完整的TypeScript类型提示。此外，你还可以快速查找所需API，参照参数表快速传参，所有操作均在编辑器内完成。

请求策略复杂请求场景的杀手锏使用alova的客户端和服务器的请求策略应对不同场景下的请求，它们对每一个请求场景都提供了完整的状态化参数、事件和操作函数，只需一行代码实现各种复杂场景的请求。

分页请求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()
})