alova是一个轻量级的请求策略库，旨在简化接口的管理和使用。它分为两部分：
-
声明式实现复杂请求： 你可以通过简单配置参数，即可实现复杂请求如请求共享、分页请求、表单提交、断点续传等，无需编写大量代码，提高开发效率，应用性能，减轻服务端压力。
-
API自动管理和维护： 不用再自己编写请求函数，也不用再查阅API文档了，alova可帮你生成完整的、描述详尽的请求函数的TypeScript类型，让前端项目与服务器端无缝对接。当服务端API更新时，前端项目也会收到通知并阻止项目发布。
使用alovajs后，你只需要选择对应的useHook进行请求即可，被称为懒人版请求库，alova同时支持vue/react/svelte框架。如果你也喜欢 alovajs，请在Github 仓库中贡献一颗 star，这对我们非常重要。
欢迎加入交流社区
有任何使用问题，你可以加入以下群聊咨询，也可以在github 仓库中发布 Discussions，如果遇到问题，也请在github 的 issues中提交，我们会在最快的时间解决。
同时也欢迎贡献你的一份力量，请移步贡献指南。
以下为部分章节的教程，想学习更多 alovajs 的用法，欢迎来alova 官网学习。
数据拉取
当你有以下需求时：
- 预加载后续流程中将会使用到的数据并存放在缓存中，让用户不再等待数据加载的过程；
- 便捷地实现跨页面更新数据（类似全局状态），例如修改 todo 列表的某一项后重新拉取最新数据，响应后将刷新界面。
useFetcher就是用于实现以上场景的 hook，通过它获取的响应数据不能直接接收到，但通过它拉取的数据除了会更新缓存外还会更新对应的状态，从而重新渲染视图。
你可以用它预拉取数据并保存到缓存中，或优雅地跨组件更新状态，例如修改 todo 列表的某一项后重新拉取最新数据，响应后将会刷新界面
跨模块/组件更新视图
下面我们来实现修改某个 todo 数据，并重新拉取最新的 todo 列表数据，让视图更新。以vue3为例。
<template>
<!-- 渲染统一的拉取状态。 -->
<div v-if="fetching">{{ 正在后台拉取数据... }}</div>
<!-- ... -->
<button @click="handleSubmit">修改todo项</button>
</template>
<script setup>
const getTodoList = currentPage => {
return alovaInstance.Get('/todo/list', {
// 注意：这边设置了name属性，用于在无法直接指定Method实例时，过滤出需要的Method实例
// 详见后续的《Method实例匹配器》章节
name: 'todoList',
params: {
currentPage,
pageSize: 10
}
});
};
const {
// fetching属性与loading相同，发送拉取请求时为true，请求结束后为false
fetching,
error,
onSuccess,
onError,
onComplete,
// 调用fetch后才会发送请求拉取数据，可以重复调用fetch多次拉取不同接口的数据
fetch
} = useFetcher();
// 在事件中触发数据拉取
const handleSubmit = () => {
// todo项修改...
// 开始拉取更新后的数据
// 情况1：当你明确知道拉取todoList第一页数据时，传入一个Method实例
fetch(getTodoList(1));
// 情况2：当你只知道拉取todoList最后一次请求的数据时，通过Method实例匹配器来筛选
fetch({
name: 'todoList',
filter: (method, index, ary) => {
// 返回true来指定需要拉取的Method实例
return index === ary.length - 1;
}
});
};
</script>
更多
Method实例匹配器的使用方法见 Method 实例匹配器
预加载数据
以下实现 todo 列表分页场景下，下一页数据的预加载功能。
<template>
<!-- ... -->
</template>
<script setup>
// method实例创建函数
const getTodoList = currentPage => {
return alovaInstance.Get('/todo/list', {
params: {
currentPage,
pageSize: 10
}
});
};
const { fetch } = useFetcher();
const currentPage = ref(1);
const { data, onSuccess } = useWatcher(() => getTodoList(currentPage.value), [currentPage], {
immediate: true
});
// 当前页请求成功时预拉取下一页的数据
// 实现当翻页到下一页时不需要等待请求
onSuccess(() => {
fetch(getTodoList(currentPage.value + 1));
});
</script>
注意事项
useFetcher 请求完成后只更新缓存，且如果发现该Method实例下还有data状态，也会同步更新它，从而保证页面数据一致，这是useFetcher用于跨模块/组件更新视图的保证。
与 useRequest 和 useWatcher 的差异对比
- useFetcher 不返回
data字段，预拉取的数据将保存在缓存中，以及更新对应位置的状态数据; - 将
loading改名为了fetching; - 没有
send函数，但多了一个fetch函数，可以重复利用 fetch 函数拉取不同接口的数据，此时你可以使用fetching和error状态统一渲染视图，从而达到统一处理的目的;
为什么要使用alova
alova 也致力于解决客户端网络请求的问题，但与其他请求库不同的是，alova 选择了业务场景化请求策略的方向，它配合axios/fetch api等请求库后能满足你绝大部分请求需求（99%）的同时，还提供了丰富的高级功能。
- 你可能曾经也在思考着应该封装
fetch和axios，现在你不再需要这么做了，通过 alova 使用声明的方式完成请求，例如请求共享、分页请求、表单提交、断点上传等各种较复杂的请求，以及自动化缓存管理、请求共享、跨组件更新状态等。 - alova 是轻量级的，只有 4kb+，是 axios 的 30%+。
- 目前支持
vue/react/react-native/svelte，以及next/nuxt/sveltekit等 SSR 框架，同时也支持Uniapp/Taro多端统一框架。 - alova 是低耦合的，你可以通过不同的适配器让 alova 在任何 js 环境下，与任何 UI 框架协作使用（内置支持的 UI 框架为
vue/react/svelte），并且提供了统一的使用体验和完美的代码迁移。 - 使用 alova 还能实现 api 代码的高聚合组织方式，每个 api 的请求参数、缓存行为、响应数据转换等都将聚集在相同的代码块中，这对于管理大量的 api 有很大的优势。
多框架支持
现在，你还可以在 vue options（vue2 和 vue3） 写法中完美使用 alova，点此查看详情。后续我们将陆续支持以下框架：
- 函数式，如
solid/preact/qwik。 - class 式，如
angular/lit/stencil。 - options 式，如
原生小程序(中国🇨🇳)。
alovajs 还提供了其他强大的请求策略：
| 名称 | 描述 | 文档 |
|---|---|---|
| 分页请求策略 | 自动管理分页数据，数据预加载，减少不必要的数据刷新，流畅性提高 300%，编码难度降低 50% | usePagination |
| 无感数据交互策略 | 全新的交互体验，提交即响应，大幅降低网络波动造成的影响，让你的应用在网络不稳定，甚至断网状态下依然可用 | useSQRequest |
| 表单提交策略 | 为表单提交而设计的 hook，通过此 hook 你可以很方便地实现表单草稿、多页面（多步骤）表单，除此以外还提供了表单重置等常用功能 | useForm |
| 文件上传策略 | 更简单的文件上传策略，支持对 base64、Blob、ArrayBuffer、Canvas 数据的自动识别和转换 | useUploader |
| 发送验证码 | 验证码发送 hook，减掉你在开发验证码发送功能时的繁琐。 | useCaptcha |
| 自动重新拉取数据 | 在一定条件下自动重新拉取数据，保证始终展示最新数据。 | useAutoRequest |
| 跨组件触发请求 | 一个 alova 中间件，消除组件层级的限制，在任意组件中快速地触发任意请求的操作函数 | actionDelegationMiddleware |
| 串行请求的 useRequest | 比alova 的串行请求方式更加简洁易用的串行请求 use hook，提供统一的 loading 状态、error、回调函数 | useSerialRequest |
| 串行请求的 useWatcher | 比alova 的串行请求方式更加简洁易用的串行请求 use hook，提供统一的 loading 状态、error、回调函数。 | useSerialWatcher |
| 请求重试策略 | 请求失败自动重试，它在重要的请求和轮询请求上发挥重要作用 | useRetriableRequest |
| SSE 请求 | 通过 Server-sent Events 进行请求 | useSSE |
想学习更多 alovajs 的用法，欢迎来alova 官网学习。如果你也喜欢 alovajs，请在Github 仓库中贡献一颗 star，这对我们非常重要。
如果觉得文章对你有帮助，请别吝啬你的赞和评论哈，说说你对 alovajs 怎么看的，或者可以问一些问题，我会尽量回答的，你的支持是我创作的最大动力！哈哈哈哈哈哈~
欢迎加入交流社区
有任何问题，你可以加入以下群聊咨询，也可以在github 仓库中发布 Discussions，如果遇到问题，也请在github 的 issues中提交，我们会在最快的时间解决。
同时也欢迎贡献你的一份力量，请移步贡献指南。
