alova是一个轻量级的请求策略库，旨在简化接口的管理和使用。它分为两部分：
-
声明式实现复杂请求： 你可以通过简单配置参数，即可实现复杂请求如请求共享、分页请求、表单提交、断点续传等，无需编写大量代码，提高开发效率，应用性能，减轻服务端压力。
-
API自动管理和维护： 不用再自己编写请求函数，也不用再查阅API文档了，alova可帮你生成完整的、描述详尽的请求函数的TypeScript类型，让前端项目与服务器端无缝对接。当服务端API更新时，前端项目也会收到通知并阻止项目发布。
使用alovajs后，你只需要选择对应的useHook进行请求即可，被称为懒人版请求库，alova同时支持vue/react/svelte框架。如果你也喜欢 alovajs，请在Github 仓库中贡献一颗 star，这对我们非常重要。
欢迎加入交流社区
有任何使用问题，你可以加入以下群聊咨询，也可以在github 仓库中发布 Discussions，如果遇到问题，也请在github 的 issues中提交，我们会在最快的时间解决。
同时也欢迎贡献你的一份力量，请移步贡献指南。
以下为部分章节的教程，想学习更多 alovajs 的用法，欢迎来alova 官网学习。
缓存模式
缓存模式可以更好地多次利用服务端数据，而不需要每次请求时都发送请求获取数据。alova分别提供了 3 种缓存模式来满足不同的缓存场景，分别为内存模式、缓存占位模式、恢复模式。缓存模式可在全局或请求级等不同粒度下设置。全局设置时，所有由相同 alova 实例创建的Method实例都会继承该设置。
注意：是否使用缓存模式，以及使用哪种缓存模式需要根据场景而定，下面在单独介绍不同缓存模式时将会提及它们的使用场景。
内存模式（默认）
内存缓存模式示例，点此查看。
内存模式将缓存放在内存中，这意味着刷新页面缓存即失效，是最常用的缓存模式。
内存模式一般用于解决短时间内（几分钟或几秒钟）频繁请求相同数据带来的性能消耗，例如当你在写 todo 详情页的时候，你可能会想到用户会频繁在 todo 列表中点击查看详情，如果用户重复查看某条详情时不再重复请求接口，并且能立即返回数据，提升了响应速度的同时也减小了服务器压力。此时我们就可以为某个 todo 详情Method实例设置响应数据缓存。
javascript
alovaInstance.GET('/todo/list', {
// ...
// highlight-start
localCache: {
// 设置缓存模式为内存模式
mode: 'memory',
// 单位为毫秒
// 当设置为`Infinity`，表示数据永不过期，设置为0或负数时表示不缓存
expire: 60 * 10 * 1000
}
// highlight-end
});内存模式为默认模式，你可以这样简写
javascript
alovaInstance.GET('/todo/list', {
// ...
// highlight-start
localCache: 60 * 10 * 1000
// highlight-end
});GET 请求将默认设置 300000ms(5 分钟)的内存缓存时间，开发者也可以自定义设置。
如果你需要全局统一设置缓存模式，见本节底部的 全局设置缓存模式
缓存占位模式
缓存占位模式示例：点此查看。
这个缓存模式用于，当你不希望应用每次进入时都显示 Loading 图标，而希望使用旧数据替代时，你可以使用缓存占位模式，它的体验比 Loading 更好。
缓存占位模式下，data将立即被赋值为上次缓存的旧数据，你可以判断如果有旧数据则使用它替代 Loading 展示，同时它将发送请求获取最新数据并更新缓存，这样就达到了既快速展示实际数据，又获取了最新的数据。
在Method实例上设置：
javascript
const todoListGetter = alovaInstance.Get('/todo/list', {
// ...
// highlight-start
localCache: {
// 设置缓存模式为持久化占位模式
mode: 'placeholder',
// 缓存时间
expire: 60 * 10 * 1000
}
// highlight-end
});如果你需要全局统一设置缓存模式，见本节底部的 全局设置缓存模式
恢复模式
恢复模式示例，点此查看
此模式下，服务端缓存数据将持久化，如果过期时间未到即使刷新页面缓存也不会失效，它一般用于一些需要服务端管理，但基本不变的数据，如每年的节假日具体日期有所不同，但不会再变动，这种场景下我们只需设置缓存过期时间为今年的最后一刻即可。
在Method实例上设置：
javascript
const todoListGetter = alovaInstance.Get('/todo/list', {
// ...
// highlight-start
localCache: {
// 设置缓存模式为持久化模式
mode: 'restore',
// 缓存时间
expire: 60 * 10 * 1000
}
// highlight-end
});注意
当 request body 是FormData 、Blob 、ArrayBuffer 、URLSearchParams 、ReadableStream等特殊数据时，将会被认为你是有意图和服务端通信的，在这种情况下不会进行缓存。
如果你需要全局统一设置缓存模式，见本节底部的 全局设置缓存模式
恢复模式下数据有变怎么办？
当设置了恢复模式的Method实例，可能由于接口数据变动，或前端处理响应数据的逻辑变动，此时需要在发布应用后让用户重新缓存变动后的数据，此时你可以通过tag属性设置缓存标签，每一份持久化数据都包含一个tag标识，当tag改变后原有的持久化数据将会失效，并重新获取新的数据，并用新的tag进行标识。
javascript
const todoListGetter = alovaInstance.Get('/todo/list', {
// ...
localCache: {
mode: 'restore',
expire: 60 * 10 * 1000,
// highlight-start
// 新增或修改tag参数，已缓存的数据将失效
// 建议使用版本号的形式管理
tag: 'v1'
// highlight-end
}
});全局设置缓存模式
版本要求 v1.3.0+
以上设置均是在Method上单独设置缓存模式的，如果你需要全局设置缓存模式，可以按如下方式做：
javascript
const alovaInstance = createAlova({
// ...
// highlight-start
localCache: {
// 统一设置POST的缓存模式
POST: {
mode: 'placeholder',
expire: 60 * 10 * 1000
},
// 统一设置HEAD请求的缓存模式
HEAD: 60 * 10 * 1000
}
// highlight-end
});此后，通过alovaInstance实例创建的Method实例，都将默认使用这份缓存设置，同时也可以在Method实例中覆盖它。
注意：当全局设置了缓存模式后，原有的 5 分钟 GET 缓存模式将被覆盖。
全局关闭缓存模式
如果在你的项目中不希望使用任何请求缓存，可以在全局将它关闭，如果希望只在特定的几个请求中使用，也可以全局关闭它，并在指定的Method实例中设置即可。
javascript
const alovaInstance = createAlova({
// ...
// highlight-start
// 设置为null即可全局关闭全部请求缓存
localCache: null
// highlight-end
});缓存 key 自动维护
响应数据缓存的 key 是由 method 实例的请求方法(method)、请求地址(url)、请求头参数(headers)、url 参数(params)、请求体参数(requestBody)组合作为唯一标识，任意一个信息或位置不同都将被当做不同的 key。
（结尾）为什么要使用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中提交，我们会在最快的时间解决。
同时也欢迎贡献你的一份力量，请移步贡献指南。