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

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]); This pattern appears in nearly every dat