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

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

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

Using it on important requests can improve their stability.

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

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

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

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

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

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

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