Automatically manage paging data, data preloading, reduce unnecessary data refresh, improve fluency by 300%, and reduce coding difficulty by 50%

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

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

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

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.