Simplify Frontend Request Logic with alova: Features, Hooks, and Code Examples

Hello, I am Gu Yun. Today I want to discuss how, when writing project code, we should focus more on business logic and let libraries or automation handle repetitive request logic, which can also be simplified.

Many developers encounter repetitive tasks such as pagination, form handling, debounce, polling, caching, loading states, error handling, captcha sending, file uploads, etc., often writing a lot of boilerplate code with axios or fetch.

alova offers a set of ready‑made request modules that manage these concerns automatically, allowing developers to concentrate on business logic.

alova's Lower Learning Curve

alova draws inspiration from axios and ahooks‑useRequest, making it easy to pick up.

alova official site (https://alova.js.org/zh-CN/).

Since its public release in April 2023, alova has attracted contributions worldwide.

If you like alovajs, please star the GitHub repository (https://github.com/alovajs/alova); it means a lot.

You can join the community chat or open Discussions/Issues on GitHub for support.

Basic Request

Basic requests provide loading, data, and error states automatically. Example using Vue 3:

<template>
<div v-if="loading">
loading...
</div>
<div v-else-if="error">
error: {{ error }}
</div>
<div v-else>
<span>
id: {{ data.title }}
</span>
<span>
title: {{ data.time }}
</span>
</div>
</template>
<script setup>
import { useRequest } from "alova";
const todoDetail = alova.Get("/todo", { params: { id: 1 } });
const { loading, data, error, onSuccess, onError, onComplete, send, abort, update } = useRequest(todoDetail);
onSuccess(event => { console.log("success", event); });
onError(event => { console.log("error", event); });
onComplete(event => { console.log("complete", event); });
</script>

useRequest automatically manages loading, data, and error states.

State‑Change Request

useWatcher listens to state changes (e.g., filters, search) and triggers requests with the same API as useRequest.

useWatcher(() => filterTodoList(page, keyword), [keyword, page], { debounce: [500, 0] });

Pre‑fetch Data

const { fetching, error, fetch } = useFetcher();
fetch(todoDetail);

Pagination Request

usePagination handles page, pageSize, total, and related logic automatically.

const { loading, data, isLastPage, page, pageSize, pageCount, total } = usePagination((page, pageSize) => queryStudents(page, pageSize));
const handlePrevPage = () => { page.value--; };
const handleNextPage = () => { page.value++; };
const handleSetPageSize = () => { pageSize.value = 20; };

Form Submission

const { form, send: submitForm, updateForm } = useForm(formData => submitData(formData), {
  initialForm: { title: "", content: "", time: "" },
  resetAfterSubmiting: true,
});

Captcha Implementation

const { loading: sending, send: sendCaptcha } = useCaptcha(() => sendCaptcha(mobile), { initialCountdown: 60 });

File Upload Strategy

const { fileList, loading, progress } = useUploader(({ file, name }) => uploadFile(file, name), {
  limit: 3,
  accept: ['png', 'jpg', 'gif'],
  imageTempLink: true,
});

Auto‑Refresh Data

useAutoRequest(todoDetail, {
  enablePolling: 2000,
  enableVisibility: true,
  enableFocus: true,
  enableNetwork: true,
  throttle: 1000,
});

Cross‑Component Request Strategy

// Component A creates proxy
useRequest(todoDetail, { middleware: actionDelegationMiddleware("someAction") });
// Component B triggers action
accessAction("someAction", actions => { actions.send(); });

Request Retry Strategy

const { onRetry, onFail, stop } = useRetriableRequest(pay, {
  retry(error) { return /network timeout/i.test(error.message); },
  backoff: { delay: 2000 },
});

SSE

const { readyState, data, eventSource, onMessage, onError, onOpen, on } =
  useSSE(() => chatGPT(), { withCredentials: true, interceptByGlobalResponded: true });

Conclusion

alova now supports Vue 2 options API as well; see the documentation for details.

Explore many runnable examples on the official site.

If you find this article helpful, please give it a like, comment, and consider starring the GitHub repository.

For more alova usage, visit the official website and contribute to the project.