Difficulty

Intermediate

Read Time

3 min

From Axios to alova: how we cut 80 lines to 5

By Codcompass Team·2026-06-01·3 min read

Frontend request code often involves repetitive state management. This article compares Axios and alova through a paginated list example, analyzing how request strategization reduces boilerplate and when it's a good fit.

The Pattern: Paginated List in Two Ways

A common requirement: fetch a user list with pagination.

Approach 1: Axios

const [data, setData] = useState([]);
const [page, setPage] = useState(1);
const [total, setTotal] = useState(0);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);

const fetchUsers = async (currentPage) => {
  setLoading(true);
  setError(null);
  try {
    const res = await axios.get('/api/users', {
      params: { page: currentPage, pageSize: 10 },
    });
    setData(res.data.list);
    setTotal(res.data.total);
  } catch (e) {
    setError(e.message);
  } finally {
    setLoading(false);
  }
};

useEffect(() => { fetchUsers(page); }, [page]);

Enter fullscreen mode Exit fullscreen mode

This pattern appears in nearly every data-fetching component. The actual business logic — GET /api/users — occupies a single line. The rest is infrastructure: state declarations, loading toggles, error handling, and effect management.

**A

pproach 2: alova with usePagination**

const {
  data, total, loading, error,
  page, pageSize, nextPage, prevPage,
} = usePagination(
  (page, pageSize) => alovaInstance.Get('/api/users', {
    params: { page, pageSize },
  }),
  { page: 1, pageSize: 10 }
);

Enter fullscreen mode Exit fullscreen mode

Both implementations are functionally identical. The key difference is where the state management logic lives: in the component (Axios) vs. inside the hook (alova).

What Changed

Component of Axios version

Handled by alova

loading state + toggling

Managed internally by usePagination

error state + try/catch

Managed internally by usePagination

data state + assignment

Returned as reactive value

page state + change handler

Built-in nextPage / prevPage

total state extraction

Extracted from response automatically

useEffect dependency tracking

Managed internally

The removed code shares one characteristic: it's infrastructure for the request pattern, not business logic. alova encapsulates this infrastructure into scenario-specific hooks.

Beyond Pagination

alova provides hooks for common request patterns:

useRequest — basic fetch

// Auto-fetch on mount
const { data, loading, error } = useRequest(getUserList());

// Manual trigger
const { send } = useRequest(createOrder, { immediate: false });

Enter fullscreen mode Exit fullscreen mode

useWatcher — reactive fetch with debounce

const { data } = useWatcher(
  () => searchApi(keyword.value),
  [keyword],
  { debounce: 300 }
);

Enter fullscreen mode Exit fullscreen mode

useForm — form submission

const { form, loading, send: submit, reset } = useForm(
  submitApi,
  { initialForm: { name: '', email: '' } }
);

Enter fullscreen mode Exit fullscreen mode

All hooks share a consistent return interface (data, loading, error) while adding scenario-specific capabilities.

Code reduction across six common scenarios:

Scenario

Axios (core lines)

alova (core lines)

Reduction

Paginated list

~30

~80%

Search with debounce

~25

~88%

Form submission

~30

~90%

Polling / auto-refresh

~25

~88%

Chained requests

~30

~83%

File upload

~35

~77%

Line counts reflect core logic only, excluding UI rendering and imports.

When to Use (And When Not To)

Good fit for:

Medium-to-large projects with many data-fetching pages
Teams wanting consistent request patterns across codebase
New projects where the abstraction can be established early

Less suitable for:

Small projects where the abstraction overhead outweighs the benefit
Teams already deeply invested in React Query or SWR — evaluate migration cost carefully
Non-standard request patterns that don't map well to existing hooks
Framework ecosystems outside of React/Vue/Svelte support

Other considerations:

Learning curve: Understanding the strategy hook paradigm takes initial investment
Debugging: The abstraction layer can add indirection when troubleshooting unexpected behavior
Ecosystem: alova's community and third-party integrations are smaller than Axios'
Migration path: The Method API mirrors Axios, enabling incremental adoption

// Nearly identical API
axios.get('/api/users', { params: { page: 1 } });
alovaInstance.Get('/api/users', { params: { page: 1 } });

Enter fullscreen mode Exit fullscreen mode

Summary

Moving from Axios to alova is not about "switching HTTP libraries." It's about treating requests as composable scenarios rather than one-shot operations you wire up manually. Whether this abstraction is valuable depends on your project's specific needs — the code reduction is real, but so are the trade-offs.

🎉 Mid-Year Sale — Unlock Full Article

Base plan from just $4.99/mo or $49/yr

7-day free trial · Cancel anytime · 30-day money-back

The Pattern: Paginated List in Two Ways

🎉 Mid-Year Sale — Unlock Full Article

Production Bundle