请求的单元不是一次调用，而是一个场景

自动管理分页、预加载下一页并减少无效刷新。分页成为一次声明的场景。

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

状态一变即刻发请求。标签页切换与条件查询场景尤其好用。

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

预加载数据以更快地显示视图，或跨组件重新拉取数据

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

带无感刷新 Token 的全局拦截器，统一管理登录、登出、令牌分配与刷新。

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

自动管理表单状态，各类表单都能快速搭好。

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

const handleSubmit = () => submit();

通过浏览器事件自动刷新数据，界面始终显示最新数据

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

在关键请求上自动重试，提升其稳定性。

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

限制给定时间窗口内发出的请求数量。

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

在多进程环境下，用分布式锁保证请求的原子性，无需手写加锁逻辑。

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