The unit of a request isn’t a call, it’s a scenario.

Manage paging, preload the next page, and skip needless refreshes. Pagination becomes one declared scenario.

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

Fire requests the moment watched state changes. Ideal for tab switching and filtered searches.

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

Preload data to render views faster, or re-fetch it across components.

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

A global interceptor with silent token refresh. Unified handling of login, logout, assignment and renewal.

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

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

Manage form state for you. Any kind of form comes together quickly.

const {
  loading: submitting,
  form,
  send: submit,
  onSuccess,
  onError,
  onComplete
} = useForm(
  formData =>
    alova.Post('/api/submit', formData),
  {
    initialForm: { name: '', cls: '1' }
  }
);

const handleSubmit = () => submit();

Refresh data automatically on browser events. The UI always shows the latest.

const { loading, data, error } = useAutoRequest(
  () => alova.Get('/api/data'),
  {
    enableVisibility: true,
    enableFocus: true,
    enableNetwork: true,
    throttle: 1000,
    pollingTime: 2000
  }
);

Stabilize critical requests by retrying them automatically.

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

Cap how many requests fire within a given window.

const limit = createRateLimiter({
  points: 4,
  duration: 60 * 1000
})
const orderRes = await limit(
  alova.Get('/api/order')
)

Guarantee request atomicity in multi-process environments with a distributed lock. No hand-written locking code.

import { atomize } from 'alova/server';

// a distributed lock keeps the request atomic
const res = await atomize(
  alova.Get('/api/user'),
  {
    channel: 'user_lock',
    timeout: 5000
  }
)