前言
传统的请求工具例如axios、fetch函数等，都只提供了最基本的请求发送和接收功能，不过，在实际项目中，请求并不会单独存在，你可能需要根据不同的请求场景自定义实现一些请求逻辑，以及维护请求相关的状态，每次遇到这些稍复杂的请求场景，比如分页、表单提交、发送验证码等等，都要写一大堆代码才能搞定，写完后结果Bug还层出不穷，这种情况真的是让我潸然泪下啊！
来推荐一个我们的请求策略库alovajs，它让请求和接口维护变得非常简单。
alovajs 是什么
alovajs是一个请求策略库，就是说它专门用来搞定各种复杂的请求场景的。你只要用它提供的Hook来声明你要的请求策略,alovajs就会帮你自动管理状态、发送请求、处理响应等等。 比如分页、表单、验证码这些场景,你都可以用极其简洁的代码就实现功能全的请求逻辑！
信不信由你，但我保证alovajs绝对是提升你代码优雅度的利器！具体请继续往下看一些实际的例子。
各种常见的请求场景对应的声明式请求
基础请求
比如获取一个todo信息,使用 alovajs 的 useRequest hook 就很简单：
js
// 和axios相似的参数风格
const todoDetail = alova.Get('/todo', {
params: {
id: 1
}
});
const {
loading,
data,
error,
onSuccess,
onError,
onComplete,
send,
abort,
update
} = useRequest(todoDetail);useRequest 会自动帮你管理 loading、data、error 等状态，不需要自己控制！
状态变化请求
在数据筛选、搜索等交互中，可以通过 useWatcher 来监听状态变化并发送请求:
js
useWatcher(
() => filterTodoList(page, keyword),
[keyword, page],
{
debounce: [500, 0], // 请求级的防抖参数
}
);它还有请求防抖、保证请求时序、过滤状态变化时是否发送请求等功能，超方便！
预加载数据
可以用 useFetcher 预加载数据,不需要直接处理响应,但会更新相关状态:
js
const {
fetching,
error,
fetch
} = useFetcher();
fetch(todoDetail);分页请求
分页场景下，page、pageSize、pageCount、total等等好多状态要自己维护，还要写一堆逻辑来判断何时应该发送请求！
如果用alovajs提供的分页Hook，你就只需要这样：
js
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直接帮你搞定表单提交、表单草稿、自动重置表单项、多页共享数据啥的。
js
const {
form,
send: submitForm,
updateForm
} = useForm(formData => submitData(formData), {
initialForm: {
title: '',
content: '',
time: '',
},
resetAfterSubmiting: true
});验证码实现
别再自己做倒计时了，这有！
js
const {
loading: sending,
send: sendCaptcha
} = useCaptcha(() => sendCaptcha(mobile), {
initialCountdown: 60
});文件上传策略
更简单的文件上传策略，支持对base64、Blob、ArrayBuffer、Canvas数据的自动识别和转换，还可以多文件同时上传、图片预览图生成
js
const {
fileList
loading,
progress
} = useUploader(({ file, name }) => uploadFile(file, name), {
limit: 3,
accept: ['png', 'jpg', 'gif'],
imageTempLink: true
});自动重新拉取数据
可以在浏览器 tab 切换时拉取最新数据、浏览器聚焦时拉取最新数据、网络重连时拉取最新数据、轮询请求自动重新拉取数据，可以同时配置以上的一个或多个触发条件，也可以配置节流时间来防止短时间内触发多次请求，例如 1 秒内只允许触发一次。
js
useAutoRequest(todoDetail, {
enablePolling: 2000,
enableVisibility: true,
enableFocus: true,
enableNetwork: true,
throttle: 1000
}跨组件请求策略
跨组件或模块触发请求相关操作，消除组件层级的限制，在任意组件中快速地触发任意请求的操作函数，例如，你可以某个组件中更新了菜单数据后，重新触发侧边菜单栏的重新请求，从而刷新数据。当操作了列表数据后，触发列表更新。
js
// 组件A创建代理
useRequest(todoDetail, {
middleware: actionDelegationMiddleware('someAction')
});
// 组件B内触发操作
accessAction('someAction', (actions) => {
actions.send()
});actionDelegationMiddleware详细文档
请求重试策略
在重要的请求上使用它，可以提高请求的稳定性，可以自定义设置是否重试，以及重试延迟，还有手动停止重试
js
const {
onRetry,
onFail,
stop,
} = useRetriableRequest(pay, {
retry(error) {
return /network timeout/i.test(error.message);
},
backoff: {
delay: 2000
}
});SSE
可以直接通过 SSE 进行请求，它可以通过全局响应和方法实例的函数transformData自动转换数据，还提供了对EventSource对象的全部控制。
js
const {
readyState,
data,
eventSource,
onMessage,
onError,
onOpen,
on
} = useSSE(() => chatGPT(), {
withCredentials: true,
interceptByGlobalResponded: true
});结尾
整体使用下来，个人感觉alovajs还是挺香的！它就是让请求开发回归简单的神器。让我们在网络请求方面效率和优雅度直线上升！
如果觉得文章对你有帮助，请别吝啬你的赞和评论哈，说说你对alovajs怎么看的，或者可以问一些问题，我会尽量回答的，你的支持是我创作的最大动力！哈哈哈哈哈哈~
想学习更多alovajs的用法，欢迎来alova官网学习。如果你也喜欢alovajs，请在Github仓库中贡献一颗star，这对我们非常重要。
欢迎加入交流社区
有任何问题，你可以加入以下群聊咨询，也可以在github仓库中发布Discussions，如果遇到问题，也请在github的issues中提交，我们会在最快的时间解决。
同时也欢迎贡献你的一份力量，请移步贡献专区。