这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助
在我们写项目代码时，应该更加专注于业务逻辑的实现，而把定式代码交给js库或工程化自动处理，而我想说的是，请求逻辑其实也是可以继续简化的。
你可能会说，用axios或fetch api就够了啊，哪有什么请求逻辑，那可能是你还没有意识到这个问题，作为一个前端开发，你肯定也遇到过这些问题：
- 处理分页逻辑
- 表单处理逻辑
- 处理请求防抖逻辑
- 处理轮询检查
- 处理缓存处理
- 处理加载状态
- 处理错误处理
- 验证码发送
- 文件上传
- ...
这些问题，如果你正在使用 axios 或 fetch api，你需要编写大量的代码来处理这些问题，但我想说，他们其实更多的也都是固定的模板代码，也可以被精简掉。
在今天你可以使用 alova 来处理它们，alova提供了大量日常业务中常用的请求模块，你只需要简单配置几行代码，alova 就能自动帮你管理请求状态，优化网络体验，那些烦人的分页逻辑、轮询检查、缓存处理，全都不用你操心了，让你更加专注于业务逻辑。
alova的学习成本更低
alova 借鉴了 axios 和ahooks-useRequest的设计，让大家更容易上手，学习成本更低。
alova 官网在这里。
alova 自从 2023 年 4 月份正式对外发布以来，在 Issues 和 Disscussion 中收到了来自世界各地的开发者积极参与的信息，深感荣幸。
如果你也喜欢 alovajs，请在Github 仓库中贡献一颗 star，这对我们非常重要。
有任何问题，你可以加入以下群聊咨询，也可以在github 仓库中发布 Discussions，如果遇到问题，也请在github 的 issues中提交，我们会在最快的时间解决。
下面我们来看看如何通过简单配置，就能帮你解决各种复杂场景下的请求问题。
基础请求
基本的请求，适用于初始化信息，自带了请求相关的各种状态。
以 vue3 为例。
<template>
<div>
<div v-if="loading">loading...</div>
<div v-else-if="error">error: {{ error }}</div>
<div v-else>
<div>
<span>id: {{ data.title }}</span>
<span>title: {{ data.time }}</span>
</div>
</div>
</div>
</template>
<script setup>
import { useRequest } from "alova";
// 和axios相似的参数风格
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 会自动帮你管理 loading、data、error 等状态，不需要自己控制！
状态变化请求
在数据筛选、搜索等交互中，可以通过 useWatcher 来监听状态变化并发送请求，返回值也包含与 useRequest 相同的状态、事件函数、操作函数。
useWatcher(() => filterTodoList(page,keyword),[keyword,page],{
debounce: [500,0],// 请求级的防抖参数
});
它还有请求防抖、保证请求时序、过滤状态变化时是否发送请求等功能，超方便！
预加载数据
可以用 useFetcher 预加载数据,不需要直接处理响应,但会更新相关状态:
const { fetching,fetch } = useFetcher();
fetch(todoDetail);
分页请求
分页场景下，page、pageSize、pageCount、total 等等好多状态要自己维护，还要写一堆逻辑来判断何时应该发送请求！
如果用 alovajs 提供的分页 Hook，你就只需要这样：
const {
// 加载状态
loading,// 列表数据
data,// 是否为最后一页
// 下拉加载时可通过此参数判断是否还需要加载
isLastPage,// 当前页码，改变此页码将自动触发请求
page,// 每页数据条数
pageSize,// 分页页数
pageCount,// 总数据量
total,} = usePagination((page,pageSize) => queryStudents(page,pageSize));
// 翻到上一页，page值更改后将自动发送请求
const handlePrevPage = () => {
page.value--;
};
// 翻到下一页，page值更改后将自动发送请求
const handleNextPage = () => {
page.value++;
};
// 更改每页数量，pageSize值更改后将自动发送请求
const handleSetPageSize = () => {
pageSize.value = 20;
};
是不是清爽很多，节省了超多重复代码。
表单提交
表单处理也很头疼吧？alova 的 useForm 直接帮你搞定表单提交、表单草稿、自动重置表单项、多页共享数据啥的。
const {
form,send: submitForm,updateForm,} = useForm((formData) => submitData(formData),{
initialForm: {
title: "",content: "",time: "",resetafterSubmiting: true,});
验证码实现
别再自己做倒计时了，这有！
const { loading: sending,send: sendCaptcha } = useCaptcha(
() => sendCaptcha(mobile),{
initialCountdown: 60,}
);
文件上传策略
更简单的文件上传策略，支持对 base64、Blob、ArrayBuffer、Canvas 数据的自动识别和转换，还可以多文件同时上传、图片预览图生成
const {
fileList
loading,progress
} = useUploader(({ file,name }) => uploadFile(file,name),{
limit: 3,accept: ['png','jpg','gif'],imageTempLink: true
});
自动重新拉取数据
可以在浏览器 tab 切换时拉取最新数据、浏览器聚焦时拉取最新数据、网络重连时拉取最新数据、轮询请求自动重新拉取数据，可以同时配置以上的一个或多个触发条件，也可以配置节流时间来防止短时间内触发多次请求，例如 1 秒内只允许触发一次。
useAutoRequest(todoDetail,{ enablePolling: 2000,enableVisibility: true,enableFocus: true,enableNetwork: true,throttle: 1000 }
跨组件请求策略
跨组件或模块触发请求相关操作，消除组件层级的限制，在任意组件中快速地触发任意请求的操作函数，例如，你可以某个组件中更新了菜单数据后，重新触发侧边菜单栏的重新请求，从而刷新数据。当操作了列表数据后，触发列表更新。
// 组件A创建代理 useRequest(todoDetail,{ middleware: actionDelegationmiddleware("someaction"),}); // 组件B内触发操作 accessaction("someaction",(actions) => { actions.send(); });
actionDelegationMiddleware 详细文档
请求重试策略
在重要的请求上使用它，可以提高请求的稳定性，可以自定义设置是否重试，以及重试延迟，还有手动停止重试
const { onRetry,onFail,stop } = useRetriableRequest(pay,{
retry(error) {
return /network timeout/i.test(error.message);
},backoff: {
delay: 2000,});
SSE
可以直接通过 SSE 进行请求，它可以通过全局响应和方法实例的函数 transformData 自动转换数据，还提供了对 Eventsource 对象的全部控制。
本文转载于:
https://juejin.cn/post/7301281320666693667
如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件举报，一经查实，本站将立刻删除。
